javascript - JAVA:删除for循环生成的div

Question

如何删除 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，但我只是不理解节点等术语。任何帮助或线索将不胜感激。谢谢!

Answer 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();
});
})