Remove dynamically created elements (with separate delete button) using jquery

Question

I'm trying to delete dynamically created elements each with their own delete button. This is the element that gets added with every button click. When the delete button of an element gets clicked I want that specific element to be deleted.

I use the following code to append the element:

$("#addsitem").click(function () {
  $("#holdsitems").append('myFunction');
});

This is how I try to remove it:

$("#item").on("click", "#deleteitem", function() {
    $("#item").remove();
});

I can only delete the elements that haven't been added.

This is all the relevant HTML code (myFunction) of the element:

<div id="item" class="itemdiv">
  <form>
    <div>
      <div id="deleteitem">
        <input type="button" name="Delete Button" value="Delete">
      </div>
    </div>
  </form>
</div>

I'm rather new to jQuery and this is giving me headaches. Would appreciate it lots if someone could help me out!

Duplicate IDs in a single document is invalid HTML - best to fix that first — CertainPerformance
– CertainPerformance, Commented Dec 30, 2018 at 23:26
@Mohamed-Yousef could you please move your comment into an answer? — twoleggedhorse
– twoleggedhorse, Commented Dec 30, 2018 at 23:43
@twoleggedhorse I posted the answer :-) .. I posted my answer to let you understand my comment .. but Oliver's explain things well .. so while its same as same I'll delete my answer and you still can check it out :-) .. Have a great day :-) — Mohamed-Yousef
– Mohamed-Yousef, Commented Dec 31, 2018 at 0:01

Oliver Trampleasure · Accepted Answer · 2018-12-30 23:43:20Z

1

You can use classes and the command .closest("selector") where this moves up the DOM tree until it finds the first element that matches that selector, you can then remove this.

You shouldn't be adding an id dynamically, unless you are adding an indices so that they are unique.

Demo

// Add new item on click of add button
$("#addsItem").click(function(event) {

  // Stop submission of form - this is not necessary if you take it out of the form
  event.preventDefault();

  // Append new form item
  $("#holdsitems").append('<div class="item-wrapper"><button type="button" class="deleteItem" >Delete</button></div>');
  
});


// Add DYNAMIC click event to class .deleteItem
$(document).on("click", ".deleteItem", function() {

  // Move up DOM tree until first incidence of .item-wrapper and remove
  $(this).closest(".item-wrapper").remove();
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="item" class="itemdiv">
  <form>
    <div id="holdsitems">
      <button id="addsItem">Add Item</button>
      <div class="item-wrapper">
        <button type="button" class="deleteItem">Delete</button>
      </div>
    </div>
  </form>
</div>

answered Dec 30, 2018 at 23:43

Oliver Trampleasure

3,3031 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohamed-Yousef Over a year ago

2nd time today to give you +1 .. I will not delete anything again :-))

Collectives™ on Stack Overflow

Remove dynamically created elements (with separate delete button) using jquery

1 Answer 1

Demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related