title: delete div on button click
body: <p>I am trying to delete the <code>div</code> on button click but the problem that I need the button to delete the div that it contain to without passing the id of the div to the delete button</p>
  
  <p>so this code at the end should be able to delete the div without passing the id of the div instead it will depend on passing <code>this</code> reference</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function() {
              $(document).on('mouseenter', '#divbutton', function() {
                  $(this).find(":button").show();
              }).on('mouseleave', '#divbutton', function() {
                  $(this).find(":button").hide();
              });
          });
      &lt;/script&gt;
  
      &lt;style&gt;
          #divbutton {
              height: 100px;
              background: #0000ff;
          }
  
          #divbutton2 {
              height: 100px;
              background: #0000ff;
          }
  
          #divbutton3 {
              height: 100px;
              background: #0000ff;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="divbutton"&gt;
          &lt;button type="button" style="display: none;" id="i" onclick="document.body.removeChild(document.getElementById('divbutton'))"&gt;Hello&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="divbutton2"&gt;
          &lt;button type="button" style="display: none;" id="i" onclick="document.body.removeChild(document.getElementById('divbutton2'))"&gt;Hello &lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="divbutton3"&gt;
          &lt;button type="button" style="display: none;" id="i" onclick="document.body.removeChild(document.getElementById('divbutton3'))"&gt;Hello &lt;/button&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>