Entfernen des gesamten div mit JavaScript

Question

Bevor Sie dies als ein Duplikat markieren, ist meine Frage anders.

Aufgrund des Fehlens von Inhalten tatsächlich auf Google, alles, was ich finden kann, ist die ID Eltern entfernen, ich glaube nicht, dass als ID Elternteil gilt würde nur Panel-Körper entfernen, dann hinterlassen Panel-Überschrift und das Panel Div dort.

Ich wollte eine kurze Frage stellen, dass ich keine Hilfe mit online finden konnte. Ich habe ein Bootstrap-Panel, das zwei Div's hat, eines für den Panel-Header und eines für den Panel-Body. Innerhalb des Panel-Body-Div habe ich eine btn btn-success-Taste, die ich auf Klick das ganze Panel entfernen möchte.

<div id="draggable" class="habbo-notification panel panel-default"> 
    <div class="panel-heading"> 
     Panel Header 
    </div> 
    <div class="panel-body"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <font color="#B00049"> 
        <h1 style="font-size:144px;margin-top:0;margin-left:14px;"><i class="fa fa-globe fa-6" aria-hidden="true"></i><h1> 
       </font> 
      </div> 
      <div class="col-md-8"> 
       <p> 
      Some content here 
     </p> 
     <br> 
     <div class="btn btn-success" onclick="" style="width:100%">Close this</div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

In Javascript oder Jquery (nicht dagegen, welche), wie kann ich das gesamte div Onclick der Schaltfläche entfernen, ohne die ID oder Klasse zu wissen oder gar keinen Zugang zum Panel div hat. Ich erkläre den Inhalt des Panel-Körpers an einer anderen Stelle als dem Ort, an dem ich das Panel deklariere, und es gibt zwei divs Panel-Body und Panel-Header.

Ich möchte das gesamte Panel div, dem die Schaltfläche zugewiesen ist, auf Klick entfernen?

<div class="btn btn-success" onclick="" style="width:100%">Close this</div> 

Kann jemand helfen?

Answer 1

Ich verstehe wirklich nicht, warum Sie nicht die Klasse verwenden können (n) der Platte div wie .panel, zum Beispiel:

$(".btn").click(function(){ 
    $(".panel").css("display","none"); 
}); 

Aber ich denke, das wäre technisch funktioniert auch:

$(".btn").click(function(){ 
     $(this).parent().parent().css("display","none"); 
    }); 

Answer 2

Die jQuery-Methode ist dieser One-Liner.

$('.btn-success').on('click', function(){ 
    $(this).closest('div.panel').remove(); 
}); 

Die .closest() Funktion sucht nach dem nächsten Eltern den mitgelieferten Selektor entsprechen. In diesem Fall prüft es jedes Elternteil von this, bis es sieht.

Sie könnten dies in Ihrem onclick="" löschen, aber auf Ereignis Attribute sind in HTML veraltet. Standards erwarten, dass Ereignisse im Javascript gesetzt werden.