title: Append Content to HTML and Remove Appended Content When Click Button
body: <p>The following code allows me to append new content to the div "users". However, I want to be able remove the appended content if the user clicks button.</p>
  
  <p>The current code removes only the "remove" button when its clicked. However, I need to remove the entire appended code with the class "removeuser", in the beginning of the appended code.</p>
  
  <p>Any help will be appreciated!</p>
  
  <pre><code>&lt;div id="users"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  
  function adduser() {
  
  count += 1;
  
  $('#users').append('&lt;div id="field'+ count +'"  class="removeuser[]"&gt;&lt;div 
  id="left"&gt;&lt;div id="fieldname"&gt;user #'+ count +' Name:&lt;/div&gt;&lt;div 
  id="field"&gt;&lt;input id="user_name'+ count +'" name="user_name[]"' + '" 
  type="text" /&gt;&lt;/input&gt;&lt;/div&gt;&lt;div id="clear"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="leftleft"&gt; 
  &lt;div id="fieldname"&gt;user #'+ count +' Age&lt;/div&gt;&lt;div id="field"&gt;&lt;input 
  type="number" id="user_age'+ count +'" name="user_age[]" 
  style="width:50px;" min="0"&gt;&lt;/input&gt;&lt;/div&gt;&lt;div id="clear"&gt;&lt;/div&gt;&lt;br&gt;&lt;/div&gt; 
  &lt;div id="leftleft"&gt;&lt;a href="javascript: void(0)" onclick="adduser(); return 
  false;"&gt;&lt;div id="field" class="add"&gt;&lt;div 
  style="position:relative;left:-4px;top:1px;"&gt;add another user +&lt;/div&gt;&lt;/div&gt; 
  &lt;/a&gt;&lt;br&gt;&lt;/div&gt; &lt;div id="leftleft"&gt;&lt;a href="javascript: void(0)" 
  onclick="$(this).remove();" &gt;&lt;div id="deluser[]" class="add"&gt;&lt;div 
  style="position:relative;left:-4px;top:1px;"&gt;-&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;br&gt;&lt;/div&gt; 
  &lt;div id="clear"&gt;&lt;/div&gt;&lt;/div&gt;');
  
  
  var no = document.getElementById("deluser");
  
  no.onclick = function(){
  
  
  $('#users .removeuser').$(this).remove();
  
  };
  
  &lt;/script&gt; 
  </code></pre>