最後のliのみをul（jQuery）から削除するにはどうすればよいですか？

Question

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

$(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(); 
     }); 
    } 
    }); 
}); 

Answer 1

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

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

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

また私たちの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 

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

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

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

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

もし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(); 
    }); 
}); 

Answer 2

あなたは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(); 
    }); 
}); 

Answer 3

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

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

Answer 4

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

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

}）;