Javascript 添加或删除动态显示的编号

因此，目前我可以轻松地添加和删除多个文本区域

但我想做的是把每个特定的文本区域编号

这是我的短信区

正如您所注意到的，我的默认文本区域是步骤1

但我想做的是，当我点击add时，它会显示另一个文本区域，上面写着

步骤2

我的Javascript

 $('.add').click(function () {
$('.block:last').before(' <div class="block"><div class="form-group"><label for="exampleFormControlTextarea1">Step</label><textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea></div><span class="remove">Remove</span></div>');
});

这是电流输出

---

要实现此功能，可以在每个.block内的标签中添加一个不含内容的span元素。然后，您可以创建一个函数，该函数在每次添加或删除.block时根据元素的索引更新该范围内的数字

我还强烈建议您克隆元素，而不是将大量HTML添加到JS逻辑中，因为这违反了关注点分离原则，因为JS与HTML的联系过于紧密。在您的例子中，只需在保存textarea元素的.block上添加一个额外的类，就可以实现这一点。试试这个：

$'.add'.clickfunction{ 让$lastBlock=$”.block.step:last'； 让$clone=$lastBlock.clone.insertAfter$lastBlock； $clone.find'textarea'.val； 更新计数； }; $'.optionBox'。在“单击”时，'.remove'，函数{ 如果$'.block.step'.length>1{ $this.closest'.block'.remove； 更新计数； } }; 让updateStepCounts==>$”。块标签span'.texti=>i+1； 更新计数； 步 去除 添加选项

---

要实现此功能，可以在每个.block内的标签中添加一个不含内容的span元素。然后，您可以创建一个函数，该函数在每次添加或删除.block时根据元素的索引更新该范围内的数字

我还强烈建议您克隆元素，而不是将大量HTML添加到JS逻辑中，因为这违反了关注点分离原则，因为JS与HTML的联系过于紧密。在您的例子中，只需在保存textarea元素的.block上添加一个额外的类，就可以实现这一点。试试这个：

$'.add'.clickfunction{ 让$lastBlock=$”.block.step:last'； 让$clone=$lastBlock.clone.insertAfter$lastBlock； $clone.find'textarea'.val； 更新计数； }; $'.optionBox'。在“单击”时，'.remove'，函数{ 如果$'.block.step'.length>1{ $this.closest'.block'.remove； 更新计数； } }; 让updateStepCounts==>$”。块标签span'.texti=>i+1； 更新计数； 步 去除 添加选项 我删除了add选项span周围的div.block，并在新添加的div.block-container元素上使用了.append，而不是.before，以将下一个textarea添加到选项容器的底部。我认为这从象征意义上讲读起来更好一些

同样使用字符串插值，我能够插入div.block+1的总数来跟踪页面上可见的文本区域的数量

希望这有帮助

$'.add'.clickfunction{ const numberOfBlocks=$.block.length； $.block容器 .附加` 步骤${numberOfBlocks+1} 去除 ` ; }; 添加选项 我删除了add选项span周围的div.block，并在新添加的div.block-container元素上使用了.append，而不是.before，以将下一个textarea添加到选项容器的底部。我认为这从象征意义上讲读起来更好一些

同样使用字符串插值，我能够插入div.block+1的总数来跟踪页面上可见的文本区域的数量

希望这有帮助

$'.add'.clickfunction{ const numberOfBlocks=$.block.length； $.block容器 .附加` 步骤${numberOfBlocks+1} 去除 ` ; }; 添加选项

---

您好，我很感谢您努力向我解释得很好，它可以工作，但是删除不起作用。我已经为您添加了删除逻辑。请记住，您需要在动态添加的字段中使用委托事件处理程序。我感谢您对我所做的解释，它可以工作，但删除不起作用。我已经为您添加了删除逻辑。请记住，您需要在动态添加的字段中使用委托事件处理程序

 $('.add').click(function () {
$('.block:last').before(' <div class="block"><div class="form-group"><label for="exampleFormControlTextarea1">Step</label><textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea></div><span class="remove">Remove</span></div>');
});