如何使用jQuery删除HTML中的动态元素

Question

我有一个HTML代码，可以通过单击按钮添加多个元素，然后分别删除每个元素。问题是删除功能不起作用。我需要删除确切的选定元素。该怎么做？

//add item
$("button").on("click", function() {
    $(".main").append($(".sub:last").clone().html());
    $("span:last").after("<button class='removeDiv'>Remove</button>");
});

//remove item
$(".removeDiv").on("click", function() {
    $(this).closest(".inner").remove();
});

.inner {
    margin-bottom : 20px;
}

.removeDiv {
    margin-left : 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
    <div class="sub">
        <div class="inner">
            <span>New Content</span>
        </div>
    </div>
</div>
<button>Add New</button>

Answer 1

您的问题不是$(this).closest(".inner").remove()正确的部分。问题是事件侦听器，您必须使用事件委托：

//add item
$("button").on("click", function() {
	$(".main").append($(".sub:last").clone().html());
  $("span:last").after("<button class='removeDiv'>Remove</button>");
});

//remove item
$(document).on("click", ".removeDiv", function() {
	$(this).closest(".inner").remove();
});

.inner {
  margin-bottom : 20px;
}

.removeDiv {
  margin-left : 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub">
    <div class="inner">
      <span>New Content</span>
    </div>
  </div>
</div>
<button>Add New</button>

一种更好的解决方案是将事件委派的事件侦听器附加到.main而不是文档上：

//add item
$("button").on("click", function() {
	$(".main").append($(".sub:last").clone().html());
  $("span:last").after("<button class='removeDiv'>Remove</button>");
});

//remove item
$(".main").on("click", ".removeDiv", function() {
	$(this).closest(".inner").remove();
});

.inner {
  margin-bottom : 20px;
}

.removeDiv {
  margin-left : 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub">
    <div class="inner">
      <span>New Content</span>
    </div>
  </div>
</div>
<button>Add New</button>

Answer 2

//add item
$("button").on("click", function() {
	$(".main").append($(".sub:last").clone().html());
  $("span:last").after("<button class='removeDiv'>Remove</button>");
});

//remove item
$('body').delegate('.removeDiv','click', function(){
  $(this).closest(".inner").remove();
})

.inner {
  margin-bottom : 20px;
}

.removeDiv {
  margin-left : 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="sub">
    <div class="inner">
      <span>New Content</span>
    </div>
  </div>
</div>
<button>Add New</button>