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并传递它。我错过了什么吗？

由于

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>

传递对元素的引用而不分配id

3 个答案: