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

问题在于，大概从创建多个按钮的上下文来看，您有很多元素具有相同的id 或buttonDiv。 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()。 p>

更多详情见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>