How to remove last element using jquery?

Question

Here I'm trying to create a calling pad that reads a maximum of 10 numbers at a time, and displays the numbers as a maximum of 6 numbers in a row. It's working functionally. I want to remove the last number when the user presses the clear button.

I used $("#calling-pad").last().remove(); to try to remove the last number, but it removes the whole contents and doesn't allow to enter a new number. How can I fix it?

 var key = 1; $("#nine").click(function(){ if (p === 1) { $("#mini-screen").css("display","none"); $("#number-screen").css("display","block"); if (key < 11) { if ((key % 7) !== 0) { $("#calling-pad").append("9"); key = key + 1; } else { $("#calling-pad").append("<br>"); $("#calling-pad").append("9"); key = key + 1; } } } }); $("#inner-icon-one").click(function(){ if (p === 1) { $("#mini-screen").css("display","none"); $("#number-screen").css("display","block"); if (key > 1) { if ((key%6) !== 0) { $("#calling-pad").last().remove(); key = key - 1; if ( key === 1) { $("#number-screen").css("display","none"); $("#mini-screen").css("display","block"); } } } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span id="calling-pad"> </span> 

Answer 1

You are just appending numbers to a span tag and are not really keeping track of user input.

$("#calling-pad").last().remove();

Is telling jQuery to remove the full contents because you are not inserting any child elements to the calling-pad span.

Therefore you could use an array to keep track of the users numbers or use a counter as I have shown below.

 var totalInputs = 0; $("#insert").on("click", function() { totalInputs++; var inputText = $("#input").val(); var id = "calling_" + totalInputs; $("#calling-pad").append("<span id='" + id + "'>" + inputText + "</span>"); }); $("#remove").on("click", function() { $("#calling_" + totalInputs).remove(); totalInputs--; }); 

 span { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="text" id="input" /> <button id="insert">Insert</button> <div id="calling-pad"> </div> <button id="remove">Remove last element</button> 

Answer 2

$("#calling-pad").contents().last().remove();
if ($("#calling-pad").contents().last().is("br")) {
    $("#calling-pad").contents().last().remove();
}

As you're dealing with textNodes, you need to use .contents() - the <br> split them up so no need to parse things, and if you're deleting the last node, you need to delete the last break at the same time...

Answer 3

You need one line to remove last comment... no need to count ids ... here is snippet ... Cheers Man

 $("#insert").on("click", function() { var inputText = $("#input").val(); $("#calling-pad").append("<span>" + inputText + "</br></span>"); }); $("#remove").click(function(){ $("#calling-pad").children("span:last").remove() }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="text" id="input" /> <button id="insert">Insert</button> <div id="calling-pad"> </div> <button id="remove">Remove last one</button> 

Answer 4

Problem - Using 'last' instead of ':last-child'

The jQuery last method does not find child elements. Instead, given a collection of elements matching a selector, it filters that collection to include only the last element. Combining this with an id-selector (ie $("#element-id").last() ) is always redundant, since $("#element-id") only matches a single element, and the resulting jQuery object is always of size 1. If there's only one element, it's always the last one.

Therefore $("#calling-pad").last().remove(); is effectively the same as saying $("#calling-pad").remove(); .

---

Solution

Instead, when you're appending data to the #calling-pad element, ensure they're included as new elements (eg wrapped in <span></span> tags):

$('#calling-pad').append("<span>9</span>");

Then, when you want to remove the last element in the #calling-pad , you simply have to do this:

$('#calling-pad > span:last-child').remove();

This finds all span elements that are direct children of the #calling-pad , filters that to only include the last element (using :last-child ), and then removes that element.