Todolist：删除动态添加的div

Question

我有一种待办事项列表，在单击“添加”按钮时添加元素。有两条默认行。 add 函数效果很好，这是原始代码

$(function() {
  $(".container").on('input', 'input[type=text]', function(event) {
    var i = $(this).closest(".flex-row").index();
    var v = (i == 0) ? $(this).val() : "|" + $(this).val();
    $("#custom_wrapper .output").eq(i).html(v);
  });

  $('.add').click(function() {
    var count = $("input").length;
    count++;
    var row = $("<div>", {
      class: "flex-row"
    }).insertBefore(this);
    $("<label>").appendTo(row);
    $("<input>", {
      type: "text",
      class: "input",
      placeholder: "custom text " + count,
      tabindex: count
    }).appendTo($("label", row));
    $("<button>", {
      class: "remove"
    }).html("-").appendTo(row);
    $("<span>", {
      class: "output"
    }).insertAfter($("#custom_wrapper .output:last"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>


<div class="container">
  <div class="wrapper">
    <article>
      <section>
        <div class="flex-row">
          <label><input class="input" type="text" name="" placeholder="custom text" tabindex="1" /></label><button class="remove">-</button>
        </div>
        <div class="flex-row">
          <label><input class="input" type="text" name="" placeholder="custom text 2" tabindex="2"></label><button class="remove">-</button>
        </div>
        <button class="add">+</button>
        <div class="flex-row">
          <div>customText{{[<span id="custom_wrapper"><span class="output"></span><span class="output"></span></span>]}}</div>
        </div>
      </section>
    </article>
  </div>
</div>

现在，我添加了一个按钮来删除线条。这就是它被卡住的地方。

例如：我添加两行，总共有 4 行。例如，每一行都有一个字母。 (a,b,c,d) 我删除“b,c,d”并保留“a”；当我添加更多内容时，添加的文本将被插入到“a”之前，而它应该在“a”之后。如果我继续添加更多内容，文本将替换现有文本，而不是被添加。

此外，我希望在我的 span.output 中，第一个文本之前永远没有管道。

有人知道问题出在哪里吗？

这是我更新的代码：

$(function() {
  $(".container").on('input', 'input[type=text]', function(event) {
    var i = $(this).closest(".flex-row").index();
    var v = (i == 0) ? $(this).val() : "|" + $(this).val();
    $("#custom_wrapper .output").eq(i).html(v);
  });

  $('.add').click(function() {
    var count = $("input").length;
    count++;
    var row = $("<div>", {
      class: "flex-row"
    }).insertBefore(this);
    $("<label>").appendTo(row);
    $("<input>", {
      type: "text",
      class: "input",
      id: "custom-text-" + count,
      placeholder: "custom text " + count,
      tabindex: count
    }).appendTo($("label", row));
    $("<button>", {
      class: "remove"
    }).html("-").appendTo(row);
    $("<span>", {
      class: "output",
      dataid: "custom-text-" + count
    }).insertAfter($("#custom_wrapper .output:last"));
  });

  $('body').on('click', '.remove', function() {
    $(this).parent('.flex-row').remove();
    var j = $(this).parent().find('.input').attr("id");
    $('#custom_wrapper .output[dataid="' + j + '"').empty();
  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <article>
      <section>
        <div class="flex-row">
          <label><input class="input" type="text" name="" id="custom-text-1" placeholder="custom text" tabindex="1" /></label><button class="remove">-</button>
        </div>
        <div class="flex-row">
          <label><input class="input" type="text" name="" id="custom-text-2" placeholder="custom text 2" tabindex="2"></label><button class="remove">-</button>
        </div>
        <button class="add">+</button>
        <div class="flex-row">
          <div class="token">{{customText[<span id="custom_wrapper"><span class="output" dataid="custom-text-1"></span><span class="output" dataid="custom-text-2"></span></span>]}}</div>
        </div>
      </section>
    </article>
  </div>
</div>

Answer 1

这有帮助吗？

$(function() {
  let nextInputId = 3;

  $(".container").on('input', 'input[type=text]', function(event) {
    const i = $(this).closest(".flex-row").index();
    const v = ((i == 0) ? "" : "|") + $(this).val();
    $("#custom_wrapper .output").eq(i).html(v);
  });

  $('.add').click(function() {
    const count = $("input").length;

    const row = $("<div>", {
      class: "flex-row"
    }).insertBefore(this);

    $("<label>").appendTo(row);

    $("<input>", {
      type: "text",
      class: "input",
      id: "custom-text-" + nextInputId,
      placeholder: "custom text " + (count + 1),
      tabindex: (count + 1)
    }).appendTo($("label", row));

    $("<button>", {
      class: "remove"
    }).html("-").appendTo(row);

    $("<span>", {
      class: "output",
      dataid: "custom-text-" + nextInputId
    }).insertAfter($("#custom_wrapper .output:last"));

    nextInputId++;
  });

  $('body').on('click', '.remove', function() {
    const i = $(this).closest(".flex-row").index();
    $("#custom_wrapper .output").eq(i).remove();
    $(this).parent('.flex-row').remove();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <article>
      <section>
        <div class="flex-row">
          <label></label>
          <input class="input" type="text" name="" id="custom-text-1" placeholder="custom text" tabindex="1" />

          <button class="remove">-</button>
        </div>
        <div class="flex-row">
          <label></label>
          <input class="input" type="text" name="" id="custom-text-2" placeholder="custom text 2" tabindex="2">

          <button class="remove">-</button>
        </div>
        <button class="add">+</button>
        <div class="flex-row">
          <div class="token">
            {{customText[<span id="custom_wrapper"><span class="output" dataid="custom-text-1"></span><span class="output" dataid="custom-text-2"></span></span>]}}
          </div>
        </div>
      </section>
    </article>
  </div>
</div>