Question

我在一个带有一些表单元素的span中创建一个动态span，并在span #add_more中通过jquery append动态创建具有data-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 span的按钮时，id为1001的按钮应使用jquery remove（）删除。

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

我是堆叠溢出的新手。这是我解释问题的最好方法。

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。

Answer 2

按钮上的公共类获取点击按钮的数据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）将click事件监听器添加到该按钮。

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

您可以添加任意数量的范围。使用类获取当前单击按钮非常容易。

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-*属性等（如果上述内容是生成它们的唯一目的），通常你可以避免使用普通的类和适当的方法。

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

3 个答案: