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

Question

I am creating a dynamic span inside a span with some form elements and creating button with data-id inside the same dynamically by jquery append in span #add_more. I want to remove that particular span when button of that span is clicked.

Step1.

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

2.Clicked on Add More button :-

<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.When clicked on button with id 1001 span with id 1001 should removed using jquery remove().

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

I am new to stack overflow. This is the best way I can explain my problem.

Answer 1

use like this:

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

call removeSpan using spanid .

to pass id you can do like this:

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

or at the time of creation it self you can add the function and pass the id which you have assigned.

Answer 2

have a common class on button get data-id of the button clicked...

<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>

add click event listener to that button using it class (remove_class).

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

you can add any number span. using class get current clicked button very easy.

Answer 3

You can simply use the prev() method:

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

If you want to remove the button as well, you can use addBack() :

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

I don't suggest manually generating id 's, data-* attributes etc for this purpose ( If above mentioned is the sole purpose of generating them ), often times you can avoid doing so using a common class and proper methods.