如何使用 jquery 销毁动态创建的 DOM 元素？答案

【问题标题】：How to destroy a dynamically created DOM element using jquery?如何使用 jquery 销毁动态创建的 DOM 元素？
【发布时间】：2014-12-20 11:27:34
【问题描述】：

我正在使用一些表单元素在跨度内创建一个动态跨度，并通过 jquery 在跨度#add_more 中附加动态地创建具有数据 ID 的按钮。单击该跨度的按钮时，我想删除该特定跨度。

步骤 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 的跨度。

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

我是堆栈溢出的新手。这是我可以解释我的问题的最佳方式。

【问题讨论】：

您在“X”按钮上有点击处理程序吗？如果是这样，它将是来自该处理程序内部的$(this).parent().empty()。

标签： javascript jquery html css dom

【解决方案1】：

在按钮上有一个公共类获取单击按钮的数据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();
});

您可以添加任何数字跨度。使用类获取当前点击的按钮非常容易。

【讨论】：

你听起来不错，但不清楚 OP 是否也想删除 <input type="text" name="price[]">。他提供的 HTML 标记建议你，但没有关于它的参考。
或者如果想要删除 esp 文本框分配它的 id 像这样 ...然后像这样删除它 $ ('#txt_'+id).remove();

【解决方案2】：

这样使用：

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

使用spanid 调用removeSpan。

要传递 id 你可以这样做：

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

或者在创建它自己时，您可以添加函数并传递您分配的 id。

【讨论】：

那么你如何获得spanId？我想这就是问题的重点
喜狼参考以下答案
如果您正在创建跨度，那么大概您可以控制它的id 是什么。但是您还没有告诉我们您是如何创建它的。或者，如果您正在创建一个 jquery 对象，您可以使用该对象代替 $("#"+spanId)。

【解决方案3】：

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

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

如果你也想删除按钮，可以使用addBack()：

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

我不建议为此手动生成 id's、data-* 属性等（如果上面提到的是生成它们的唯一目的），通常你可以避免这样做所以使用一个通用的类和适当的方法。

【讨论】：