動的に追加された要素を具体的に削除する方法は？

Question

質問が分かりにくく、重複しているかもしれませんが、私の問題の具体的な解決策を見つけることができませんので、詳細を教えてください。

私は記事のサムネイルにブートストラップ使用して画像をたくさん表示しています 私はforeachループを使用して、動的に を要素を追加していたデータベース から値を取得するためにPHPを使用していますここに抜粋です：

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やクラス名がないので、削除したい特定の要素を取得できません....

ここにあります私のコンテキストメニュースニペット：

$(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ループで、idがhasMenuのHTML要素を多数生成していますが、これは無効です。それをクラスに変更する必要があります。

次に、そのクラスの要素にコンテキストメニューのプラグインを添付できます。最後に、ボタンに配置された各コールバック関数内のキーワードを使用して、最初にメニューを表示する要素を参照できます。使用しているコンテキストメニュープラグイン

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