CODEWITHSUNDEEP
javascriptjquery
Samir van Stokkum
Samir van Stokkum

Reputation: 3

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

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!

Upvotes: 0

Views: 1916

Answers (1)

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

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>

Upvotes: 1

Related Questions