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

Question

Currently I'm using JQuery to spawn items into a HTML canvas to drag around and create visio style kind of drawings. The problem I'm having trouble figuring out is how to remove these items. Now I know I can use the .remove or the .click but the functionality I want is like this:

I want the user to click on the delete button then click on the item on the canvas they wish to remove that they created earlier. I'm not sure how to track the fact that the delete button has been clicked so when they click on the item they want to remove it can send the .remove to remove it from the canvas.

I have seen lots of examples of a delete button next to a table or element so you can remove it once the button is clicked but I want a global delete button at the button of the screen that can be clicked then the user can click on the item anywhere on the canvas to be removed.

Any help would be greatly appreciated.

Answer 1

Basically you want to set a flag whenever the delete button is highlighted and look at that flag whenever the user clicks the element.

Here I am setting a class on the button. If the button has the specified class then the element should be deleted -

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

You could assign a class to each of the elements that the user can remove.

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

Upon selecting(clicking) on the element remove the active class from all of the existing elements and assign the active class to the current item.

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

Then upon delete button click. Remove the element with the active class.

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

Example here:

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