使用JavaScript单击事件处理程序更改标签

我正在尝试删除“挂起”标签，并希望添加新的“完成”标签。 请在下面找到我迄今为止编写的代码。此代码可以工作，但挂起的标签现在位于“完成”标签的旁边。我认为前者可以被移除

$(document).on('click','.pending', function() {
    var li_node = $(this).parent();
    li_node.append('<span class="label success">Done!</span>');
    li_node.remove('<span class="label pending">Pending</span>');
    li_node.addClass('completed');
});

$（文档）.on（'单击'，'挂起'，函数（））{
var li_node=$（this.parent（）；
li_node.append（'Done！'）；
li_node.remove（'Pending'）；
li_node.addClass（'completed'）；
});

我工作的截图。我可以去掉挂起的标签，只留下完成的标签吗

这是html代码：我正在关注一个在线教程，它似乎是为你设计的，让你有一个经验丰富的JS教练陪伴

<div id="container">
  <h1>Wish List</h1>
  <ol id="items">
    <!-- Items will be added here -->
  </ol>
  <span class="total"></span>
  <br/>
  <input type="text" id="item"/>
  <button id="add-to-list">Add to list</button>
</div>

愿望清单


添加到列表中

有些东西告诉我，我应该开始一个新的主题，以增加这个问题，但这将意味着复制所有以前的代码…请让我知道，如果我违反了规则

我不知道如何在JavaScript控制台中编写一个jQuery选择器，使用.length属性选择所有挂起的标签。我正在使用之前的所有代码，这是我正在使用的浏览器列表的屏幕截图。我需要获得挂起标签的数量和已完成标签的数量

---

只需更改标签的类别和文本即可，而无需添加或删除内容：

$(document).on('click','.pending', function() {
    var li_node = $(this).parent();
    li_node.children('.label.pending').removeClass("pending").addClass("success").text("Done!");
    li_node.addClass('completed');
});

---

不要添加或删除内容，只需更改标签的类别和文本即可：

$(document).on('click','.pending', function() {
    var li_node = $(this).parent();
    li_node.children('.label.pending').removeClass("pending").addClass("success").text("Done!");
    li_node.addClass('completed');
});

$（文档）.on（'单击'，'挂起'，函数（））{
var li_node=$（this.parent（）；
li_node.append（'Done！'）；
li_node.children（“.label.pending”）.remove（）；
li_node.addClass（'completed'）；
});

$（文档）。在（'单击'，'挂起'，函数（）上）{
var li_node=$（this.parent（）；
li_node.append（'Done！'）；
li_node.children（“.label.pending”）.remove（）；
li_node.addClass（'completed'）；
});

这是一个有效的解决方案，我在变量前使用$ 名称（当它是jQuery对象时）。如果您在 您将获得其父元素的选择器。然后在$（这个）上调用remove，它就可以工作了

$(document).on('click', '.pending', function () {
    var $li_node = $(this).closest('li');
    $(this).remove();
    $li_node.append('<span class="label success">Done!</span>').addClass('completed');          
});

$（文档）。在（'click'，'pending'，函数（）{
var$li_node=$（this）.closest（'li'）；
$（this.remove（）；
$li_node.append（'Done！'）.addClass（'completed'）；
});

这是一个有效的解决方案，我在变量前使用$ 名称（当它是jQuery对象时）。如果您在 您将获得其父元素的选择器。然后在$（这个）上调用remove，它就可以工作了

$(document).on('click', '.pending', function () {
    var $li_node = $(this).closest('li');
    $(this).remove();
    $li_node.append('<span class="label success">Done!</span>').addClass('completed');          
});

$（文档）。在（'click'，'pending'，函数（）{
var$li_node=$（this）.closest（'li'）；
$（this.remove（）；
$li_node.append（'Done！'）.addClass（'completed'）；
});

我们需要查看所有相关代码。（也就是html）

remove（）

不接受参数

li\u node.remove（）

删除

li\u node

本身。我想你的意思是

li\u node.children（“.label.pending”）.remove（）

我们需要查看所有相关的代码。（也就是html）

remove（）

不接受参数

li\u node.remove（）

removes

li\u node

本身。我想你的意思是

li\u node.children（“.label.pending”）.remove（）