JQuery 使用其他人具有的类删除特定元素

Question

我正在做的一个有趣的小项目遇到了问题。 我目前可以选择通过单击按钮来创建元素，但我希望能够再次删除它们(它们都是可拖动的，使其像白板或发布板一样工作。但！从某种意义上说，我遇到了麻烦，当我使用当前函数删除时，它只是首先获取任何div，所以如果我选择底部发布它，那么它会删除第一个。

这是我当前的代码：

function deleteDiv() {
$("#buttonDiv").parent().remove(); }

我有一个名为"拖动"的div，这是我想要删除的div，这就是我选择 #buttonDiv 父级的原因。

这是我要删除的整个div 的 HTML。

<div class='drag resizable'>
<textarea class='resizable' type='text'></textarea>
<div id='buttonDiv'>
<button onClick='deleteDiv();'>Delete</button>
<br>
<button>Change color</button>
</div>
</div>

是否也可以"隐藏"它而不是删除它？我正在使用的 JQuery UI 显然喜欢在每个与之相关的div 上占据页面的整个宽度，我似乎无法更改它。因此，如果隐藏或将可见性更改为隐藏会起作用。

Answer 1

问题是，大概从创建多个按钮的上下文来看，您有很多元素具有相同的buttonDivid。id属性必须是唯一的。请改用类。然后，可以将事件处理程序挂接到该类，并仅从 DOM 中删除相关元素。

另请注意，on*事件属性已过时。您应该改用不显眼的事件处理程序 - 如果您要动态附加元素，则应使用委托的事件处理程序。由于您已经包含了jQuery，因此您可以通过以下方式执行此操作：

$(document).on('click', '.buttonDiv .delete', function() {
$(this).closest('.drag.resizable').remove();
}).on('click', '.buttonDiv .color', function() {
$(this).closest('.drag.resizable').toggleClass('foo');
});;

.foo { background-color: #CCC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='drag resizable'>
<textarea class='resizable' type='text'></textarea>
<div class='buttonDiv'>
<button class="delete">Delete</button><br>
<button class="color">Change color</button>
</div>
</div>
<div class='drag resizable'>
<textarea class='resizable' type='text'></textarea>
<div class='buttonDiv'>
<button class="delete">Delete</button><br>
<button class="color">Change color</button>
</div>
</div>

Answer 2

尝试：

<div class='drag resizable'>
<textarea class='resizable' type='text'></textarea>
<div id='buttonDiv'>
<button onClick='deleteDiv(this);'>Delete</button>
<br>
<button>Change color</button>
</div>
</div>
function deleteDiv(ele) {
$(ele).closest('div.drag').remove(); 
}

Answer 3

试试这样。

如果选择多级父CLASS/ID，则需要使用PARENTS()函数而不是PARENT()。

有关更多详细信息，请参阅 https://api.jquery.com/parents/

function deleteDiv(el){
$(el).parents('.drag').remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='drag resizable'>
<textarea class='resizable' type='text'></textarea>
<div id='buttonDiv'>
<button onClick='deleteDiv(this);'>Delete</button>
<br>
<button>Change color</button>
</div>
</div>
<div class='drag resizable'>
<textarea class='resizable' type='text'></textarea>
<div id='buttonDiv'>
<button onClick='deleteDiv(this);'>Delete</button>
<br>
<button>Change color</button>
</div>
</div>