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/