Jquery onlick entfernen Eltern div

Question

Ich habe den folgenden Code, aber wie kann ich erreichen, wenn Sie auf die Schaltfläche Entfernen klicken das Elternteil div entfernt?

 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

passieren den aktuellen Kontext zu Element thisremoveDiv Funktion.

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

ändern Funktion als

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

---

jedoch, wie Sie jQuery verwenden, sollten Sie binden Ereignis es verwenden, hier ist ein Beispiel, wo ich Class Selector (“.class”) verwendet haben Event-Handler mit Elementen zu binden .

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

mit jquery mit einfach das Click-Ereignis hinzu: wie blew.Its wird entfernen Sie die closest parent div

zwei Methoden:

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>