添加删除并动态指示编号

Question

所以目前我可以轻松添加和删除多个textarea

但我想做的是给每个特定的编号textarea

这是我的文本区域

你注意到我的默认文本区域是Step 1

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

Step 2

  <div class="optionBox">

                <div class="block">

                    <div class="form-group">

                      <label for="exampleFormControlTextarea1">Step 1</label>

                      <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>

                    </div>

                     <span class="remove">Remove</span>

                </div>

                <div class="block"> <span class="add">Add Option</span>

                </div>

            </div>

我的 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>');

});

这是当前的输出

Answer 1

要完成这项工作，您可以在 each中添加一个span没有内容的元素。然后，您可以创建一个函数，每次添加或删除.label.blockspan.block我还强烈建议您克隆元素而不是在 JS 逻辑中添加大量 HTML，因为这违反了关注点分离原则，因为将 JS 与 HTML 联系得太紧密。在您的情况下，这可以通过简单地添加一个额外的类来完成，该类.block包含textarea元素。尝试这个：$('.add').click(function() {&nbsp; let $lastBlock = $('.block.step:last');&nbsp; let $clone = $lastBlock.clone().insertAfter($lastBlock);&nbsp; $clone.find('textarea').val('');&nbsp; updateStepCounts();});$('.optionBox').on('click', '.remove', function() {&nbsp; if ($('.block.step').length > 1) {&nbsp; &nbsp; $(this).closest('.block').remove();&nbsp; &nbsp; updateStepCounts();&nbsp; }});let updateStepCounts = () => $('.block label span').text(i => i + 1);updateStepCounts();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="optionBox">&nbsp; <div class="block step">&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; <label for="exampleFormControlTextarea1">Step <span></span></label>&nbsp; &nbsp; &nbsp; <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>&nbsp; &nbsp; </div>&nbsp; &nbsp; <span class="remove">Remove</span>&nbsp; </div>&nbsp; <div class="block">&nbsp; &nbsp; <span class="add">Add Option</span>&nbsp; </div></div>

Answer 2

我删除了div.block周围的“添加选项”span并.append在新添加的div.block-container元素上使用，而不是在选项容器底部.before添加下一个。textarea我认为这在语义上读起来更好一些。同样使用字符串插值，我可以插入 + 1 的总数div.block来跟踪页面上可见的文本区域的数量。希望这可以帮助。$('.add').click(function () {&nbsp; const numberOfBlocks = $(".block").length;&nbsp;&nbsp;&nbsp; $(".block-container")&nbsp; &nbsp; .append(`&nbsp; &nbsp; &nbsp; <div class="block">&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="exampleFormControlTextarea1">Step ${numberOfBlocks + 1}</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <span class="remove">Remove</span>&nbsp; &nbsp; &nbsp; </div>`&nbsp; &nbsp; );});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="optionBox">&nbsp; &nbsp; <div class="block-container">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <span class="add">Add Option</span></div>