如何使用jQuery删除最后一个元素？

Question

我正在尝试创建一个呼叫面板，每次最多读取10个数字，并将数字显示为每行最多6个数字。它的功能已经正常。当用户按下清除按钮时，我想删除最后一个数字。

我使用了$("#calling-pad").last().remove();来尝试删除最后一个数字，但它会删除整个内容，不允许输入新数字。如何解决这个问题？

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>

- ADH - THE TECHIE GUY

Answer 1

您只是将数字追加到标签中，而没有真正跟踪用户输入。

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

如果您没有向calling-padspan插入任何子元素，那么告诉jQuery删除完整内容。因此，您可以使用数组来跟踪用户的号码，或者像下面所示使用计数器。

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>

- Darren

Answer 2

问题 - 使用 '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();

这会查找所有直接子元素为#calling-pad的span元素，过滤仅包含最后一个元素（使用:last-child），然后删除该元素。

- nbrooks

Answer 3

您只需要一行代码即可删除最后一个评论，无需计算id。以下是示例代码...祝好运！

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

- Saad Saeed

Answer 4

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

由于你处理的是文本节点，所以需要使用 .contents() 方法来分割 <br>，不需要解析任何内容。如果你要删除最后一个节点，同时需要删除最后一个 <br>...

- Rycochet