如何专门删除动态添加的元素？

Question

我知道这个问题不太容易理解，也可能是重复的，但我找不到我的问题的具体解决方案，所以请允许我详细说明。

我在文章缩略图中使用引导程序显示大量图像 我正在使用 PHP 从数据库中获取值 我正在使用 foreach 循环并动态添加元素 这是一个sn-p：

foreach ($cursor as $document) 
{
  foreach ($document["Pics"] as $photos) 
  {
    echo "<article id='hasMenu' class='development design'>
      <a href=".$photos["Photo"])." class='swipebox'>
        <img  src=".$photos["Photo"]." class='work img-responsive'>
      </a>
    </article>";
  }
}

此代码从数据库中获取所有图像并将其显示在我的页面上

现在这是我在删除特定图像时遇到问题的添加部分。我正在使用右键单击上下文菜单，但我无法获取要删除的特定元素，因为没有 id 或类名，因为我不知道将添加多少图像....

这是我的上下文菜单 sn-p：

$(function() {
  $.contextMenu({
    selector: "#hasMenu",
    callback: function(key, options) {
      if (key == "delete") {
        var m = "clicked: " + key;
        window.console && console.log(m) || alert(m);
      }

      if (key == "open") {
        var m = "clicked: " + key;
        window.console && console.log(m) || alert(m);
      }
    },
    items: {
      "open": {
        name: "Open", 
        icon: "edit"
      },
      "delete": {
        name: "Delete", 
        icon: "delete"
      },
    }
  });

  $('.context-menu-one').on('click', function(e) {
    console.log('clicked ', e);
  })
});

通过这个我添加了一个右键单击上下文菜单，显示删除和打开选项。

现在当我点击删除时，我想获取我想删除的特定图像（文章）的 ID...

我希望我的问题陈述清楚......

Answer 1

首先，您的 PHP 循环生成了大量 HTML 元素，它们都具有相同的 id 和 hasMenu，这是无效的。你应该把它改成一个类。

然后您可以将上下文菜单插件附加到具有该类的元素。最后，您可以在放置在按钮上的每个回调函数中使用this 关键字来引用触发菜单首先显示的元素。试试这个：

$.contextMenu({
  selector: ".hasMenu",
  items: {
    "open": {
      name: "Open",
      icon: "edit",
      callback: function(key, opt) {
        $(this).find('span').show();
      }
    },
    "delete": {
      name: "Delete",
      icon: "delete",
      callback: function(key, opt) {
        $(this).remove();
      }
    },
  }
});

.hasMenu span { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.5/jquery.contextMenu.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.5/jquery.contextMenu.min.css" />

<div class="hasMenu">Right click me... #1 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #2 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #3 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #4 <span>Opened content...</span></div>
<div class="hasMenu">Right click me... #5 <span>Opened content...</span></div>