Question

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

这是我目前的代码：

<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>

我有一个名为＆＃34; drag＆＃34;这是我要删除的那个，这就是为什么我选择#buttonDiv的父级。

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

{{1}}

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

Answer 1

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

另请注意，on*事件属性已过时。你应该使用不引人注意的事件处理程序 - 如果你动态地附加元素，那么就委托给那些事件处理程序。正如您已经包含了jQuery，以下是如何做到的：

＆＃13;

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

＆＃13;

.foo { background-color: #CCC; }

＆＃13;

<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>

＆＃13;

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/

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: