在jQuery中使用parent（）时，避免删除所有后续div元素

Question

我尝试过使用nearest（）和parent（）jquery方法，但两者似乎都删除了我想要删除的所有div之后的所有div。我不希望为每个新div分配一个ID，因为它们是动态生成的

＆＃13;

＆＃13;

$(document).ready(function() {

  $(document).on('click', '.add_row', function() {
    alert("add new row method called");
    $(".student_mounting").last().append('<div  class="student_mounting">' +
      '<button  class="add_row" src="../images/add-resource.png">Add</button>' +
      '<button  class="remove_row" src="../images/exit.png">Remove</button>' +
      '</div>');
  });


  $(document).on('click', '.remove_row', function() {
    $(this).closest().remove();
  });
});

＆＃13;

.student_mounting {
  position: relative;
  top: 12px;
  height: 120px;
  width: 265px;
  border-radius: 6px;
  margin-top: 120px;
  background-color: #F4EBBC;
  z-index: 4;
  border: 2px solid #6B4235;
  border-radius: 5px;
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<div class="student_mounting">
  <button class="add_row" src="../images/add-resource.png">Add</button>
  <button class="remove_row" src="../images/exit.png">Remove</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里我添加了一个id为'studentParent'的父div，我们在这个父div中添加了所有动态创建的div。因此，当我们使用parent（）函数删除div时它将起作用。

当您执行此代码时，您可以在我们按下删除按钮时识别删除了哪个div。

$(document).ready(function() 
 {      

   $(document).on('click' ,'.add_row', function() 
   {
    alert("add new row method called");
    var value=$("#HidVal").val();
    value++;
    $("#HidVal").val(value);
     $("#studentParent" ).last().append('<div  class="student_mounting">'+
      '<button  class="add_row" src="../images/add-resource.png">Add '+value+'</button>'+
      '<button  class="remove_row" src="../images/exit.png">Remove</button>'+
     '</div>');   
  });


  $(document).on('click' ,'.remove_row', function()
  {
    $(this).parent().remove();
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.student_mounting {

position:relative;
top:12px;
height:120px;
width:265px;
border-radius:6px;
margin-top:120px;
background-color:#F4EBBC;
z-index:4;
border: 2px solid #6B4235;
border-radius: 5px;
color: black;
} 
</style>
<div id="studentParent"> 
<input type="hidden" id="HidVal" value="1">
<div class="student_mounting">
  <button  class="add_row" src="../images/add-resource.png">Add 1</button>
  <button  class="remove_row" src="../images/exit.png">Remove</button>
</div>
</div>

Answer 2

如果您的预期输出是要删除您单击删除的容器，请检查以下代码段。

您的代码中的一切都很完美，除了您错过了通过closest()函数提及您想要查找的内容。所以我在这里通过了最接近div的类作为参数。希望它有所帮助。

＆＃13;

＆＃13;

$(document).ready(function() {

  $(document).on('click', '.add_row', function() {
    alert("add new row method called");
    $(".student_mounting").last().append('<div  class="student_mounting">' +
      '<button  class="add_row" src="../images/add-resource.png">Add</button>' +
      '<button  class="remove_row" src="../images/exit.png">Remove</button>' +
      '</div>');
  });


  $(document).on('click', '.remove_row', function() {
    $(this).closest('.student_mounting').remove();
  });
});

＆＃13;

.student_mounting {
  position: relative;
  top: 12px;
  height: 120px;
  width: 265px;
  border-radius: 6px;
  margin-top: 120px;
  background-color: #F4EBBC;
  z-index: 4;
  border: 2px solid #6B4235;
  border-radius: 5px;
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<div class="student_mounting">
  <button class="add_row" src="../images/add-resource.png">Add</button>
  <button class="remove_row" src="../images/exit.png">Remove</button>
</div>

＆＃13;

＆＃13;

＆＃13;