JAVA：删除由 for 循环生成的 div

Posted 2023-05-09

【中文标题】JAVA：删除由 for 循环生成的 div

【英文标题】：JAVA: Deleting a div generated by a for loop

【发布时间】：2016-10-29 20:55:44

【问题描述】：

如何删除由 for 循环生成的 div？我有这个生成 div 的代码：

编辑：我尝试了@Andrew Liberio 的更改，但发生的事情是我的申请人 div 分散在各处。这是新代码和脚本。请注意我是如何放置 for 循环的结束分号以便将索引放入 ajax 中的。 （由于某种原因在代码块中没有看到，但它是这样的 >/script>

                <% ApplicantDAO applicantDAO = new ApplicantDAO();%>
                <% for (int i = 0; i < applicantDAO.viewApplicant().size(); i++) %>

                <div class="column">
                    <div class="col-sm-3 col-xs-4">


                        <div class="list-group">


                            <a  class="list-group-item active">
                                <img src = "th_1x1.jpg" class = "img-responsive" alt = "Responsive Image" width = "100%" height ="100">
                                <h4 class="list-group-item-heading" id="guardName<%=+i%>" id="guardName<%=+i%>"><%=applicantDAO.viewApplicant().get(i).getApplicantFirstName() + " "%>
                                    <%=applicantDAO.viewApplicant().get(i).getApplicantLastName()%></h4>                 
                            </a>
                            <a  class="list-group-item">
                                <p class="list-group-item-text" id="applyingFor<%=+i%>" id="applyingFor<%=+i%>"><%=applicantDAO.viewApplicant().get(i).getApplyingFor()%></p>
                            </a>
                             <a class="list-group-item" data-toggle="modal" href="#moreDetails<%=+i%>">
                                <button  class="btn btn-primary btn-lg btn-block" id="moreDetails">More Details</button>                                   
                            </a>
                                <a  class="list-group-item">
                                <button type="button" class="btn btn-default" aria-label="Left Align">
                                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
                                </button>
                                <button type="button" class="btn btn-default" aria-label="Left Align">
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                </button>
                            </a>

            <script>
                                                        $(".delete").on("click", function () 
                                                            var id = $(this).attr("delete<%=applicantDAO.viewApplicant().get(i).getApplicantID()%>"); //get the id of the row
                                                            $.post("url_to_servlet_responsible_to_exclude_item", 
                                                                tId: id,
                                                                someOtherData: "anyData"
                                                            ).done(function () 
                                                                //if everything went ok,
                                                                //delete the div
                                                                $("div#" + id).remove();
                                                            );
                                                        )


            </script>

但我不知道如何删除它同时在数据库中删除它。我使用 jsp 和 servlet。这是我的删除代码：

         public boolean rejectApplicant(Applicant RejectedApplicant) 
    try 
        DBConnectionFactory myFactory = DBConnectionFactory.getInstance();
        Connection conn = myFactory.getConnection();

        String query = "delete from applicant where applicantID = ?";

        PreparedStatement pstmt = conn.prepareStatement(query);


        int rows = pstmt.executeUpdate();
        conn.close();
        pstmt.close();
        return true;
     catch (SQLException ex) 
        Logger.getLogger(ApplicantDAO.class.getName()).log(Level.SEVERE, null, ex);
    
    return false;

我认为将 div 的值传输到数据库时也适用相同的逻辑。该页面是一个申请人页面，在此筛选申请人，如果他们不通过，他们将被删除，当他们被接受时，这些值将被传递到数据库。请建议我该怎么做。我已经搜索了 javascript 和 jquery，但我只是不理解节点等术语。任何帮助或线索将不胜感激。谢谢！

【问题讨论】：

把id传给servlet，它会调用方法，你可以把那个方法放到java类中

在每个外部 div 上放置一个 id，以便您识别它们，然后在删除时删除具有适当 id 的 div。

【参考方案1】：

您可以按照@LAROmega 的建议将 id 传递给每个 div 或/和每个按钮。

<div class="column" id="<%=applicantDAO.viewApplicant().get(i).getApplicantId()">
  <div class="col-sm-3 col-xs-4">
...
<button type="button" class="btn btn-default delete" aria-label="Left Align" id="<%=applicantDAO.viewApplicant().get(i).getApplicantId()">
  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>

然后，您可以使用此脚本通过 AJAX 删除该行。

$(".delete").on("click", function()
var id = $(this).attr("id"); //get the id of the row
$.post("url_to_servlet_responsible_to_exclude_item", 
   tId: id,
   someOthetData: "anyData"
).done(function()
   //if everything went ok,
   //delete the div
   $("div#" + id).remove();
);
)

【讨论】：

您现在可以检查新代码吗？我认为我执行此错误

是的，有点混乱。 JavaScript 代码不必保留在 For 循环中。它会在它之外。这段 JavaScript 代码只需执行一次。

但是如果我这样做，我不能根据 for 循环中的 id 分配 id。还是我理解错了？谢谢！

您将使用循环将 id 分配给您的 div，这是正确的。但我想提醒您，JS 函数会监听所有按钮点击，因为您将类“删除”放在每个生成的 div 上，JS 函数是：$(".delete").on("click", ...)。这就是为什么必须将 JS 脚本移到 For 循环之外的原因。

感谢您让我注意到它。但是，在我更改它之后仍然没有发生任何事情。这是因为id吗？或 $("div#" + id).remove()。我是 AJAX 和 JS/Jquery 的新手，所以我不太了解大部分代码。再次感谢您帮助我学习和回答我的问题

【参考方案2】：

首先，我认为你不应该在循环中使用函数on("click"。 您应该为要删除的每个按钮使用 delete 类。

<button type="button" class="btn btn-default delete" data-id="<%=applicantDAO.viewApplicant().get(i).getApplicantID()%>" aria-label="Left Align">
    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>

在循环之外，你调用函数on click

$(".delete").on("click", function () 
        var id = $(this).attr("data-id"); //get the id of the row
        $.post("url_to_servlet_responsible_to_exclude_item", 
            tId: id,
            someOtherData: "anyData"
        ).done(function () 
            //if everything went ok,
            //delete the div
            $("div#" + id).remove();
        );
    )