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=".1.1/jquery.min.js"></script>
<span id="calling-pad"> </span>

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>

• javascript
• jquery
• html

4 Answers 4

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>

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.

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

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>