Question

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

编辑：我已经尝试过@Andrew Liberio的变化，但发生的事情是我的申请人div已遍布所有地方。这也是新代码和脚本。注意我是如何放置for循环的结尾分号以便将索引放入ajax中。（由于某种原因在代码块中没有看到，但它就像这样＆gt; / script＆gt;＆lt;％}％＆gt;

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

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

JAVA：删除for循环生成的div

2 个答案: