Jquery onclick remove parent div

Question

I have the following code but how can i achieve when clicking on the remove button the parent div removes?

     function removeDiv(){
            $(this).parent('div').remove();
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
        <div>
            <div><button onClick="removeDiv()">button1</button></div>
        </div>
        <div>
            <div><button onClick="removeDiv()">button2</button></div>
        </div>
    </div>

Answer 1

pass the current element context this to removeDiv function.

<div><button onClick="removeDiv(this)"></button></div>

Change function as

function removeDiv(elem){
    $(elem).parent('div').remove();
}

---

However as you are using jQuery, You should bind event using it, here is an example, where I have used Class Selector (“.class”) to bind event handler with elements.

jQuery(function($) {
  $('.removeDiv').on('click', function() {
    $(this).parent('div').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>
    <div>
      <button class="removeDiv">removeDiv</button>
    </div>
  </div>
  <div>
    <div>
      <button class="removeDiv">removeDiv</button>
    </div>
  </div>
</div>

Answer 2

using with jquery simply add the click event: like blew.Its will be remove the closest parent div

Two Methods:

   1.$(this).parent('div').remove();

   2.$(this).closest('div').remove();

$(document).ready(function (){
$('button').click(function (){
        $(this).parent('div').remove();
  //$(this).closest('div').remove(); its also working
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <div><button >remove1</button></div>
    </div>
    <div>
        <div><button >remove2</button></div>
    </div>
</div>