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

Question

我正在做的一个有趣的小项目遇到了问题。 我目前可以选择通过单击按钮来创建元素，但我希望能够再次删除它们(它们都是可拖动的，使其像白板或张贴板一样工作。)。但!我遇到了麻烦，因为当我使用当前函数删除时，它只需要第一个 div，所以如果我选择底部发布它，那么它会删除第一个。

这是我当前的代码:

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

我有一个名为“drag”的 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

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

另请注意，on* 事件属性已非常过时。您应该使用不显眼的事件处理程序 - 如果您要动态附加元素，则应该使用委托(delegate)的事件处理程序。由于您已经包含了 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>