How to remove the last item using jquery?

Question

I am new to jQuery and I am trying to create a calling panel that reads a maximum of 10 numbers at a time and displays the numbers as a maximum of 6 numbers in a row. It works functionally. I want to delete the last number when the user clicks the clear button.

I used $("#calling-pad").last().remove();to try to delete the last number, but it deletes all the contents and does not allow me to enter a new number. How can i fix this?

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>

Run code

Answer 1

You simply add numbers to the tag spanand do not actually track user input.

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

jQuery , span calling-pad.

, .

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

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

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

textNodes, .contents() - <br>, , , node, ...

Answer 4

- 'last' ': last-child'

jQuery last . , , , , . id- (.. $("#element-id").last()) , $("#element-id") , jQuery 1. , .

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

---

, #calling-pad, , (, <span></span>):

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

, #calling-pad, :

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

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