Как добавить и удалить различные добавленные div с помощью jquery/javascript?

Я создал 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>

javascript jquery html

04.05.2019 18:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы нажимаете кнопку add person, вы добавляете HTML из test1 к элементу с классом flex-container-name-adult. Этот HTML не включает сам класс div with test1. Теперь, когда вы нажимаете кнопку delete person, вы удаляете все элементы с классом test1. Таким образом, после этого действия в документе больше не будет элементов с классом test1, которые впоследствии можно будет использовать на кнопке add person.

Я предлагаю использовать .клон() для того, что вы хотите сделать, и всегда удалять последнего добавленного человека. Что-то вроде этого:

$(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>

04.05.2019 18:56

Другие вопросы по теме

Как правильно передать значение атрибута нажатой кнопки для формирования события отправки?

Выпадающие меню WordPress перекрываются — при наведении на одно открывается другое

Как динамически изменить точку местоположения на картах Google, используя координаты долготы и широты, без перезагрузки страницы

Chart.js с линейной диаграммой и гистограммой - гистограмма не отображается, хотя отображается максимальное значение

Как добавить элемент навигации bootstrap 4 в активный класс с помощью jquery

HTML-атрибуты jQuery с HTML?

Показать изображение в ajax из обработчика FileResult (Действие)

Как выровнять таблицы данных

Значение ввода поля даты начальной загрузки, заданное с помощью jquery

Jquery javascript навигация (перенаправление) проблема

Как добавить и удалить различные добавленные div с помощью jquery/javascript?

Ответы 1

Другие вопросы по теме

Похожие вопросы