title: Remove dynamically created elements (with separate delete button) using jquery
body: <p>I'm trying to delete dynamically created elements each with their own delete button. <a href="https://i.stack.imgur.com/5rQ2i.png" rel="nofollow noreferrer">This is the element that gets added with every button click.</a> When the delete button of an element gets clicked I want that specific element to be deleted.</p>
  
  <p>I use the following code to append the element:</p>
  
  <pre><code>$("#addsitem").click(function () {
    $("#holdsitems").append('myFunction');
  });
  </code></pre>
  
  <p>This is how I try to remove it:</p>
  
  <pre><code>$("#item").on("click", "#deleteitem", function() {
      $("#item").remove();
  });
  </code></pre>
  
  <p>I can only delete the elements that haven't been added.</p>
  
  <p>This is all the relevant HTML code (myFunction) of the element:</p>
  
  <pre><code>&lt;div id="item" class="itemdiv"&gt;
    &lt;form&gt;
      &lt;div&gt;
        &lt;div id="deleteitem"&gt;
          &lt;input type="button" name="Delete Button" value="Delete"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm rather new to jQuery and this is giving me headaches. Would appreciate it lots if someone could help me out!</p>