2017-11-22 87 views
1

要素を追加するリストを作成しようとしていますが、「削除」ボタンを押したときに1つずつ削除するだけです。残念ながら、何か不思議なことが起こります.2つの要素を追加すると、削除ボタンは両方を削除します。最後のliのみをul(jQuery)から削除するにはどうすればよいですか?

$(document).ready(function(){ 
    $(".additem").on("click", function(){ 
    var val = $("input").val(); 
    if(val!=="") { 
     var elem = $("<li></li>").text(val); 
     $(".list-item").append(elem); 
     $("input").val(""); 
     $(".removeitem").on("click", function() { 
     $(".list-item li:last-child").remove(); 
     }); 
    } 
    }); 
}); 
+1

あなたは、クリックイベントをネストされています。 '.additem'をクリックするたびに、新しい' .removeitem'クリックイベントが追加されます。これらのイベントをネストしないでください –

+0

実行可能なサンプルコードを追加してください。そうすれば、作業コードを表示するのが簡単になります。 – olahell

+0

ありがとうございます!今私は気が気になりません:) – StefanC

答えて

0

clickイベントリスナーがあるあなたがあなたのリストに要素を追加するたびに、あなたの削除ボタン

に追加され、プログラムに問題あなたは問題を理解しますので、私はより深くどのようにあなたのコードの作業について説明します:

まず、これは我々が一例として、それに取り組むのページです:

enter image description here

また私たちのJavaScriptコード:

var i = 0; 
$(document).ready(function(){ 
    $(".additem").on("click", function(){ 
    var val = $("input").val(); 
    if(val!=="") { 
     var elem = $("<li></li>").text(val); 
     $(".list-item").append(elem); 
     $("input").val(""); 
     $(".removeitem").on("click", function() { 
     i++; 
     console.log("Call Remove Event " + i); 
     $(".list-item li:last-child").remove(); 
     }); 
    } 
    }); 
}); 

最初の呼び出し:あなたはあなたのリストにitem10を追加するとき、あなたはitem10を削除]をクリックしたときにイベントリスナーがあなたの削除]ボタンを1回追加されますクリックすると削除だけでコンソール出力も、リストから

を削除します:Call Remove Event 1

第二コール:あなたもitem10あなたのリストへの追加時に、イベントリスナーをクリックして削除ボタンを削除して、あなたがクリックしたときにを削除するために2回追加されますとitem9は、リストから削除されます

コンソール出力:

Call Remove Event 2 
Call Remove Event 3 

enter image description here

その理由は、あなたのリストの最後の要素は、2回直接削除されます削除ボタンをクリックしたとき、それはだです削除ボタンを2回クリックしているようです。

サードコール:あなたはあなたのリストにitem9を追加するときに、イベントリスナーをクリックして削除ボタンを削除し、item9item8item7を削除クリックしたときにして3回追加されます

コンソール出力リストから削除されます:

Call Remove Event 4 
Call Remove Event 5 
Call Remove Event 6 

enter image description here

もしCこの問題を解決するために、このメソッドは、実行されてからremoveitem要素上の任意の追加のハンドラを続ける

$(document).ready(function(){ 
    $(".additem").on("click", function(){ 
    var val = $("input").val(); 
    if(val!=="") { 
     var elem = $("<li></li>").text(val); 
     $(".list-item").append(elem); 
     $("input").val(""); 
     $(".removeitem").on("click", function(e) { 
     e.stopImmediatePropagation(); 
     $(".list-item li:last-child").remove(); 
     }); 
    } 
    }); 
}); 

:どちらかevent.stopImmediatePropagation()を使用して、この方法を試してみてください。

それとも単にあなたがクリック機能にadditemの範囲外でクリック機能にremoveitemを置くことができ、それが正常に動作します:

$(document).ready(function(){ 
    $(".additem").on("click", function(){ 
    var val = $("input").val(); 
    if(val!=="") { 
     var elem = $("<li></li>").text(val); 
     $(".list-item").append(elem); 
     $("input").val("");  
    } 
    }); 
    $(".removeitem").on("click", function() { 
     $(".list-item li:last-child").remove(); 
    }); 
}); 
+1

非常に感謝!非常に明白な:) – StefanC

+0

あなたの歓迎! 答えがあなたの問題を解決した場合、将来的には参照として受け入れられたとマークしてください。 – Oghli

3

あなたはadditemクラスを持つすべての要素のためのremoveitemクラスを持つすべての要素にクリックハンドラを追加しています。これにより、同じことを行ういくつかのイベントが発生します。以下のように、クリック機能をオンからオフに切り替えます。

$(document).ready(function() { 
    $(".additem").on("click", function() { 
    var val = $("input").val(); 
    if (val !== "") { 
     var elem = $("<li></li>").text(val); 
     $(".list-item").append(elem); 
     $("input").val(""); 
    } 
    }); 
    $(".removeitem").on("click", function() { 
    $(".list-item li:last-child").remove(); 
    }); 
}); 
+0

ありがとう!非常にクリア:) – StefanC

0

削除リスナーを追加リスナーの外側に置きます。インデックスは以下の持っていることで、その後

$(".additem").on("click", function() { 
 
    var val = $("input").val(); 
 
    if (val !== "") { 
 
    var elem = $("<li></li>").text(val); 
 
    $(".list-item").append(elem); 
 
    // $("input").val(""); 
 
    } 
 
}); 
 
$(".removeitem").on("click", function() { 
 
    $(".list-item li:last-child").remove(); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type- 'text'/> 
 
<input type='button' class='additem' value='Add' /> 
 
<input type='button' class='removeitem' value='Remove' /> 
 
<ul class='list-item'> 
 

 
</ul>

+0

ありがとう!すべてが現在明るいです:) – StefanC

+0

答えがあなたの問題を解決するならば、投票してください。ハッピーコーディング:) –

0

UL要素の最初のGETの長さと、最後のli要素を削除

$( "#のbtnid")。クリックしてください(関数(){
var val = $( 'ul li')。length;
$( "ul li")。eq(val-1).remove();

});

関連する問題