JQuery：如何单击删除按钮，然后单击要删除的项目

Question

目前我正在使用 JQuery 将项目生成到 HTML 画布中以拖动并创建 visio 样式的绘图。 我无法弄清楚的问题是如何删除这些项目。 现在我知道我可以使用 .remove 或 .click 但我想要的功能是这样的：

我希望用户单击删除按钮，然后单击他们希望删除之前创建的画布上的项目。 我不确定如何跟踪删除按钮已被单击的事实，因此当他们单击要删除的项目时，可以发送 .remove 以将其从画布中删除。

我已经看到了很多表格或元素旁边的删除按钮的例子，所以你可以在点击按钮后将其删除，但我想要一个可以点击的屏幕按钮上的全局删除按钮，然后用户可以点击要删除画布上任何位置的项目。

任何帮助将不胜感激。

Answer 1

基本上，您想在删除按钮突出显示时设置一个标志，并在用户单击元素时查看该标志。

在这里，我在按钮上设置了一个类。 如果按钮具有指定的类，则应删除该元素 -

 $(document).ready(function() { $("#delete").click(function() { $(this).toggleClass("deleting"); }); $("div").click(function() { if ($("#delete").hasClass("deleting")) $(this).remove(); }); });

 button.deleting { background-color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Text1</div> <div>Test2</div> <div>Test3</div> <button id="delete">Delete</button>

Answer 2

您可以为用户可以删除的每个元素分配一个类。

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=IMG1&w=100&h=100" class="elements" />

选择（单击）元素后，从所有现有元素中删除活动类并将活动类分配给当前项目。

$('.elements').click(function () {
    $('.elements.active').removeClass('active');
    $(this).addClass('active');
});

然后点击删除按钮。 删除具有活动类的元素。

$('#deleteElement').click(function () {
    $('.elements.active').remove();
})

这里的例子：

http://jsfiddle.net/SeanWessell/4emomnqe/