クリックイベント質問です。

Question

$(function() {

	   $(".hoge").on("click", (function() {
							var this_hoge=$(this);
							$(".piyo").show();
							
							$(".fuga").click(function(){
													  this_hoge.remove();
							});
							}));
});

リストから
hogeを押すとpiyoモーダルが表示されます。
piyoの内容は「閉じる」と「削除」=（fuga）です。
削除を押すと最初に押したhogeが削除されます。
ここまでは順調ですが

「閉じる」を選択したうえ
またhogeを押して削除すると
最初に押したhogeと2回めに押したhoge両方削除されてしまいます。
最後に選択したhogeを削除する方法を教えて下さい。

Answer 1

簡単にするなら、次のようにしてみるとどうでしょう?

$(function() {
    var this_hode;
    $(".hoge").on("click", (function() { 
        this_hoge=$(this); 
        $(".piyo").show();
    });

    $(".fuga").click(function(){ 
        this_hoge.remove(); 
    }); 
}); 

Comments

[rainbowsix002]

おかげさまで解決いたしました。ありがとうございます。

Answer 2

若干、情報が足りてないですが、たとえば

<li class="hoge"></li>
<li class="hoge"></li>
<li class="hoge"></li>

という.hogeクラスが付いた要素が複数ある状況で考えています。

この状況であれば、選択状況を表わす状態変数を作れば良いのです。具体的には

$(function() {
	var current_selected_hoge;
  $(".hoge").on("click", (function() {
    current_selected_hoge = $(this);
		$(".piyo").show();
     
    $(".fuga").click(function() {
      current_selected_hoge.remove();
    });
  }));
});

という感じの外部選択の状態をつくれば、最後に選択したものが削除されるはずです。

Comments

[rainbowsix002]

おかげさまで解決いたしました。ありがとうございます。