Question

我建立了一个form，您可以在其中单击一个按钮来添加一个人。现在，我想添加一个新按钮以删除最新添加的人。我当前的代码仅删除一个人，此后，我无法再添加另一个人。有人知道怎么了吗？

$(document).ready(function(){
  $("#button1").click(function(){
    $(".flex-container-name-adult").append($(".test1").html());
  });
});

$(document).ready(function(){
  $("#button3").click(function(){
    $(".test1").remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="flex-container-name-adult">

  <button id="button1">Add person</button>
  <button id="button3">Delete person</button>

  <div class="test1">
    <div class="flex-wrapper-name-adult">
	  <span class="adult">Person</span><br>
      <input type="text" class="input" placeholder="Name" name="name" required>
      <input type="text" class="input" placeholder="Nachname" name="nachname" required>
      <input type="date" class="input" placeholder="Geburtsdatum" name="geburtstag" required onfocus="(this.type='date')" onblur="(this.type='Geburtsdatum')">
    </div>
  </div>

</div>

Answer 1

单击add person按钮时，会将test1的 html 附加到类为flex-container-name-adult的元素上。该 html 本身不包含div类的test1。现在，当您单击delete person按钮时，您将删除所有类为test1的元素。因此，执行该操作后，文档上将不再有test1类的元素，以后可以在add person按钮上使用。

我建议您使用.clone()进行操作，并始终删除最后添加的人。像这样：

$(document).ready(function()
{
    $("#button1").click(function()
    {
        // Clone the first ".test1" element and append it to the wrapper.

        $(".flex-container-name-adult").append($(".test1").first().clone());
    });

    $("#button3").click(function()
    {
        // Delete last ".test1" element, if exists more than one.

        let tests = $(".test1");

        if (tests.length > 1)
           tests.last().remove();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="flex-container-name-adult">

  <button id="button1">Add person</button>
  <button id="button3">Delete person</button>
  
  <div class="test1">
    <div class="flex-wrapper-name-adult">
	    <span class="adult">Person</span><br>
      <input type="text" class="input" placeholder="Name" name="name" required>
      <input type="text" class="input" placeholder="Nachname" name="nachname" required>
      <input type="date" class="input" placeholder="Geburtsdatum" name="geburtstag" required onfocus="(this.type='date')" onblur="(this.type='Geburtsdatum')">
    </div>
  </div>

</div>

如何使用jquery / javascript附加和删除不同的附加div？

1 个答案: