如何使用jQuery销毁动态创建的DOM元素？

Question

我将创建一个包含一些表单元素的动态span，并在同一span中使用jQuery append创建带有data-id的按钮 #add_more。 我希望在单击该span的按钮时删除该特定的span。

步骤1.

<input type="button" value="Add More" id="more_size">
<span id="add_more"></span>

2. 点击“添加更多”按钮：

<input type="button" value="Add More" id="more_size">
<span id="add_more">
    <span id="1001"><input type="text" name="price[]">
    <button data-id="1001" type="button">X</button></span>
</span>

3. 当点击id为1001的按钮时，应使用jQuery remove()方法删除id为1001的span。

<input type="button" value="Add More" id="more_size">
<span id="add_more"></span>

我是stack overflow的新手。这是我能解释我的问题的最好方式。

- royleewheels

---

你在“X”按钮上有一个点击处理程序吗？如果是这样，那么在该处理程序内部，它将是$(this).parent().empty()。 - Ja͢ck

Answer 1

使用方法如下：

function removeSpan(spanId) {
   $("#"+spanId).remove();
}

调用removeSpan函数时需要使用spanid参数。

传递id的方法如下：

$('button').on('click',function(){
     id = $(this).data('id');// since your data-id and span id are same
     removeSpan(id);
});

或者在创建时就可以添加函数并传递您分配的ID。

- Suchit kumar

---

那么如何获取 spanId？我猜这就是问题的关键。 - A. Wolff

嗨，Wolf，请参考下面的答案。 - muni

如果您正在创建该跨度元素，那么很可能您可以控制其id属性。但您还没有告诉我们您是如何创建它的。或者，如果您正在创建一个jQuery对象，您可以直接使用该对象来代替$("#"+spanId)。 - David Knipe

Answer 2

在按钮上有一个共同的类，获取被点击按钮的data-id...

<span id="add_more">
  <span id="1001"><input type="text" name="price[]">
  <button data-id="1001" type="button" class='remove_class'>X</button></span>
</span>

使用类名(remove_class)将点击事件监听器添加到该按钮。

$(document).on('click','.remove_class',function(){
     id = $(this).data('id');
     $('#'+id).remove();
});

你可以添加任意数量的span。使用class很容易获取当前点击的按钮。

- muni

---

听起来不错，但不清楚OP是否也想删除<input type="text" name="price[]">。他提供的HTML标记暗示了这一点，但问题中没有相关参考。 - A. Wolff

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - muni

Answer 3

您可以简单地使用 prev() 方法：

$("#add_more").on("click", "button", function() {
  $(this).prev().remove();
});

如果您想同时删除按钮，可以使用 addBack()：

$("#add_more").on("click", "button", function() {
 $(this).prev().addBack().remove();
});

我不建议手动生成id、data-*属性等来达到这个目的（如果上述提到的是唯一的生成目的），通常情况下，你可以使用一个公共类和适当的方法来避免这样做。

- T J