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>

Darren · Accepted Answer · 2016-11-05 10:18:30Z

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>

nbrooks · Accepted Answer · 2016-11-05 10:26:28Z

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 (i.e. $("#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 (e.g. 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.

Rycochet · Accepted Answer · 2016-11-05 10:25:45Z

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...

answered Nov 5, 2016 at 10:25

Rycochet

2,9381 gold badge25 silver badges40 bronze badges

Comments

Saad Saeed · Accepted Answer · 2016-11-05 10:46:16Z

2

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>

answered Nov 5, 2016 at 10:46

Saad Saeed

637 bronze badges

Collectives™ on Stack Overflow

How to remove last element using jquery?

4 Answers 4

Comments

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

Solution

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

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

Solution

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest