傳遞對元素的引用而不分配ID

Question

我希望幾個元素使用相同的onclick處理程序，所以我有：

function close_div() {
    $(this).remove();
}

<div class="closeX" onclick="close_div()">The first div</div>
<div class="closeX" onclick="close_div()"The second div</div>
<div class="closeX" onclick="close_div()"The third div</div>

因此，當您單擊任何div時，它將被從DOM中刪除。

上面代碼的問題是onclick沒有傳遞有用的this關鍵字，因此close_div（）無法使用它。 如果我給每個div.closeX一個不同的id ，則可以將其作為close_div(id)傳遞，並執行類似$("#"+id).remove() 。 但是似乎應該有一種方法可以自動將引用傳遞給被單擊的元素，而無需為該元素分配ID並傳遞該ID。 我想念什么嗎？

謝謝

Answer 1

甚至更好-不要使用內聯處理程序。

$('.closeX').on('click', function(e){
  $(this).remove();
});

我可能猜測您正在動態創建這些元素，這就是為什么要使用內聯處理程序-但是我們仍然有一個更好的解決方案，可以將行為和內容分開。
這就是所謂的委托。

基本上，如果要動態添加這些元素，則在DOM中的某個位置有一個靜態祖先-關鍵是將處理程序附加到該祖先。

例如：

$('#ancestor-container').on('click', '.closeX', function(e){
  $(this).remove();
});

Answer 2

刪除內聯事件處理並分配類似這樣的內容，

$(".closeX").on("click", close_div);

Answer 3

function close_div(el) {
    $(el).remove();
}

<div class="closeX" onclick="close_div(this)">The first div</div>
<div class="closeX" onclick="close_div(this)"The second div</div>
<div class="closeX" onclick="close_div(this)"The third div</div>