überprüfen, ob Klick außerhalb von Element ist - auf entfernte Element

Question

ich die Jquery Art und Weise mit engsten versucht, zu überprüfen, ob ein Klick außerhalb eines Elements ist:

$(document).click(function(event) { 
    if(!$(event.target).closest("#wrapper").length) { 
    console.log($(event.target)) 
    console.log("click outside of #wrapper"); 
    } 
}); 

$("#remove-me").click(function(){ 
    $(this).remove(); 
    console.log("remove me clicked"); 
}); 

$("#click-me").click(function(){ 
    console.log("click clicked"); 
}); 

<div id="wrapper"> 
    <div id="remove-me">click me to remove from dom</div> 
    <div id="click-me">click me</div> 
</div> 

Aber wenn ich #remove-me klicken, wird der div entfernt vom DOM - es ist jetzt irgendwo im Raum - und es wird keine closest() finden. Die überraschende Sache ist, dass der document Listener immer noch den Klick UND das Element erhält, obwohl es nicht im DOM mehr ...

Wie würde ich richtig einen Weg finden, wenn diese div in meinem Wrapper ist. Ist das ein jQuery-Problem oder gibt es einen reinen Javascript-Weg? Warum löst der Listener $(document).click() immer noch auf dem entfernten Element aus?

Ein Weg, fand ich heraus zu überprüfen, ob die div keine parent() hat ...

Codepen Beispiel: http://codepen.io/urtopal/pen/BLJgrQ

---

Zusammenfassung/Frage:

1. Warum ist ein Hörer auf ein entferntes Element wird noch ausgelöst (Beispiel oben "Klicken außerhalb von #wrapper" sollte nicht ausgeführt werden, wenn #remove-me angeklickt wird)?
2. Wie löst man das? Kein Trigger überhaupt/oder wie überprüft man, ob es entfernt wurde?

Answer 1

-return false; am Ende des 'click' Handler versuchen, es wird das Ereignis aus sprudelt das DOM zu verhindern, und auch andere gebundene Handler stoppen Ausführung:

$("#remove-me").click(function(){ 
    $(this).remove(); 
    console.log("remove me clicked"); 
    return false; 
}); 

Answer 2

starten:

$(document).click(function(event) { 
 
    if($(event.target).prop("tagName").toLowerCase() == "html") { 
 
    console.log("click outside of #wrapper"); 
 
    } 
 
}); 
 
        
 
$("#remove-me").click(function(){ 
 
    $(this).remove(); 
 
    console.log("remove me clicked"); 
 
}); 
 

 
$("#click-me").click(function(){ 
 
    console.log("click clicked"); 
 
});

#wrapper { 
 
    background-color: #ccc; 
 
    padding: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="remove-me">click me to remove from dom</div> 
 
    <div id="click-me">click me</div> 
 
</div>