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/

JQuery：如何单击“删除”按钮，然后单击项目以删除

2 个答案: