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

Question

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

这是我当前的代码：

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>

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

Answer 1

问题是因为，从创建多个按钮的上下文来看，您有很多具有相同 id 或 buttonDiv 的元素。 id 属性必须是唯一的。请改用 class。然后，您可以将事件处理程序挂接到 class，并仅从 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

这样试试。

如果你选择多级parent 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>

Answer 3

尝试：

<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(); 
}

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

JQuery Remove specific element with class others have

html

jquery

draggable