在 html 中删除选定的 div

Question

我正在处理收件箱页面，我必须在其中显示邮件。 有一个 jsp 代码在新邮件到达数据库时递增。

我已经放置了一个删除按钮，以便可以删除所选邮件。但是当我单击 Del 按钮时，由于功能放置错误，整个收件箱都会被删除！

代码是（也在http://pastie.org/8593077）：

<script>
function deleteCheckBox(){
  if (document.getElementById('checkboxid').checked){
        var answer = confirm('Are you sure you want to delete this checkbox?');
         if (answer)
           {
           $(".del_mail").remove();
           }
         }else{
           alert("Pls check the checkbox.");
          }
}
</script>

<form id ="login" name="login" action="" method="post" class="form">
                <div id="error"></div>              
                <fieldset>
                    <div><b>Inbox</b>
                    </div>
                </fieldset>
                <fieldset>
                <%
                    int i=0;
                    while(i<3)
                    {

                %>
                    <div class="row">
                        <div class="del_mail">
                            <section class="col col-16">
                                <input type="checkbox" id="checkboxid" name="checkboxname">
                            </section>

                            <section class="col col-6">
                                <label>
                                    <p>From</p>
                                </label>
                            </section>

                            <section class="col col-6">
                                <label>
                                    <a href="message.html">Subject</a>
                                </label>
                            </section>

                                <button align="right" id="btnDeleteid" onclick="deleteCheckBox()" name="btnDeletename">Delete</button>
                        </div>

                    </div>
                <% i++;
                    } %>
    </fieldset>
</form>

我想问这里如何删除特定的行或Div？

Answer 1

使用此代码：

<button align="right" id="btnDeleteid" onclick="deleteCheckBox(this)" name="btnDeletename">Delete</button>

在上述 HTML 中，您需要使用函数中的 this 发送当前复选框的对象。

在 JS 代码中使用这个：

function deleteCheckBox(that){
  if (that.checked){
     var answer = confirm('Are you sure you want to delete this checkbox?');
     if (answer) {
       that.parentNode.remove();
     }
  } else {
    alert("Pls check the checkbox.");
  }
}

您可以在我采用的参数中获取该对象。并通过获取它，您可以选择要删除的父节点。

在您的代码中，您使用的是.del_mail，它选择了所有 具有类名 del_mail 的元素并删除所有这些 元素。

Answer 2

你正在使用一个类“.del_mail”，所以所有这个类的 div 都被删除了（删除的 jquery 调用实际上在所有这些元素上循环）。

一个可行的解决方案：您可以根据您的增量变量放置一个不同的 id，例如 id="del_mail_3"，并通过将您的 i 传递给 deletecheckbox 来删除正确的元素 $("#del_mail_3")。

Answer 3

使用下面的代码，这将起作用（请在您的项目中添加 jquery 库）

$(document).ready(function(){
    $(".del_mail").click(function(){

     if (document.getElementById('checkboxid').checked){
        var answer = confirm('Are you sure you want to delete this checkbox?');
        if (answer)
        {
          $(this).remove();
        }
         else{
           alert("Pls check the checkbox.");
        }
     }
    });
});