CODEWITHSUNDEEP
jqueryhtml
Stefan
Stefan

Reputation: 11

How to remove ONLY the last li from a ul (jQuery)?

I am trying to create a list in which to add elements to it and only to remove one by one when "Remove" button is pressed. Unfortunately, something weird happens and if I add 2 elements the remove button deletes them both.

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

Upvotes: 1

Views: 920

Answers (4)

Oghli
Oghli

Reputation: 2340

The problem in your program that each time you add element to your list there is a click event listener is added to your remove button

I will explain more deeply how your code work so you will understand the problem:

Firstly this is our page that we will work on it as example:

enter image description here

Also our javascript code:

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

First call: when you add item10 to your list, remove click event listener will be added 1 time to your remove button and when you click remove item10 will only remove from list

also console output : Call Remove Event 1

Second call: when you add also item10 to your list, remove click event listener will be added 2 times to remove button and when you click remove item10 and item9 will be removed from list

console output:

Call Remove Event 2
Call Remove Event 3

enter image description here

The reason for that is when you clicked remove button the last element of your list will be removed 2 times directly it's like you are clicking remove button two times.

Third call: when you add item9 to your list, remove click event listener will be added 3 times to remove button and when you click remove item9,item8 and item7 will be removed from list

console output:

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

enter image description here

To solve this problem you can either try this way using event.stopImmediatePropagation():

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

This method will keep any additional handlers on removeitem element from being executed.

Or simply you can put removeitem on click function outside scope of additem on click function and it will work fine:

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

Upvotes: 0

Balaji ChandraSekaran
Balaji ChandraSekaran

Reputation: 47

first get length of ul element and then remove last li element by index has below,

$("#btnid").click(function(){
var val = $('ul li').length;
$("ul li").eq(val-1).remove();

});

Upvotes: 0

4b0
4b0

Reputation: 22323

Put delete listener out side the add listener .

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

Upvotes: 0

Wouter Bouwman
Wouter Bouwman

Reputation: 1013

You are adding a click handler to all elements with the removeitem class for every element with the additem class. This will cause several events doing the same thing. Take the on click function out of the other on click function as shown below.

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

Upvotes: 3

Related Questions