title: First html DIV can be removed but further appended cannot
body: <pre><code>$('button').click(function() { $("ul").append('&lt;div&gt;').addClass("a");}); //Adding new DIVs
  
  $('div').on('click',function() { $(this).replaceWith('');});  //Trying to remove them
  </code></pre>
  
  <p><a href="https://jsfiddle.net/galexj9/3y3d5k2o/" rel="nofollow">This </a>is my fiddle trying to simply create a DIV with the "Add New!" button and then later when the DIV is clicked on it is removed.<br>
  I tried using different commands for the removing part including using <code>.click();</code> instead of <code>.on();</code> and also using <code>.hide();</code> and <code>.html('');</code> and <code>.remove();</code> for the <code>.replaceWith('');</code>    All of which have successfully removed the FIRST div which is already coded onto the page but not any of the DIVs which are appended to the list.</p>