Как я могу клонировать и удалить HTML-форму с помощью JavaScript (js)? - PullRequest
Новая
       32

Как я могу клонировать и удалить HTML-форму с помощью JavaScript (js)?

2 голосов
/ 11 ноября 2019

Я хочу клонировать форму, а затем иметь возможность удалить только что созданную форму. Я знаю, как его клонировать, но не как его удалить. Я смог удалить только оригинальную форму, но не клонированную.

Это мой код: 

function duplicate(id) {
  var elmnt = document.getElementById(id);
  var cln = elmnt.cloneNode(true);
  var num = 1;
  cln.id = id + num;
  document.body.appendChild(cln);
}

function remove(id) {
  var elem = document.getElementById(id);
  elem.parentNode.removeChild(elem);
}
<form class="f0" action="action.php" id="f0">
  <input type="text" name="name" id="name" required="">
  <button onclick="duplicate('f0')">Duplicate</button>
  <button onclick="remove('f0')">Remove</button>
  <input type="submit" value="Next"/>
</form>

1 Ответ

3 голосов
/ 11 ноября 2019

Вам вообще не нужно id с.

Минимальное изменение - передать this в remove из onclick (и, поскольку вы не хотитечтобы отправить форму, присвойте ей type): 

<button onclick="remove(this)" type="button">Next</button>

Затем в remove используйте переданный элемент кнопки, чтобы найти форму, в которой он находится: 

function remove(button) {
    var form = button.closest("form");
    form.parentNode.removeChild(form);
}

Вы можете внести аналогичные изменения в duplicate: 

function duplicate(button) {
    var form = button.closest("form").cloneNode(true);
    document.body.appendChild(form);
}

Обязательно удалите id из формы, так как он не нужен и будет дублирован указанным выше.

Live Пример: 

function remove(button) {
    var form = button.closest("form");
    form.parentNode.removeChild(form);
}

function duplicate(button) {
    var form = button.closest("form").cloneNode(true);
    document.body.appendChild(form);
}
<form class="f0" action="action.php">
  <input type="text" name="name" id="name" required="">
  <button onclick="duplicate(this)" type="button">Duplicate</button>
  <button onclick="remove(this)" type="button">Next</button>
</form>

Но еще лучше было бы вообще не использовать атрибут onclick, потому что когда вам приходится использовать глобальные функции и глобальные переменныелучше избегатьВместо этого используйте современную обработку событий (addEventListener): 

function remove() {
    var form = this.closest("form");
    form.parentNode.removeChild(form);
}

function duplicate() {
    var form = this.closest("form").cloneNode(true);
    setupHandlers(form);
    document.body.appendChild(form);
}

function setupHandlers(form) {
    form.querySelector(".form-duplicate").addEventListener("click", duplicate);
    form.querySelector(".form-remove").addEventListener("click", remove);
}

// Setup handlers on any initially-present forms
document.querySelectorAll(".f0").forEach(setupHandlers);
<form class="f0" action="action.php">
  <input type="text" name="name" id="name" required="">
  <button class="form-duplicate" type="button">Duplicate</button>
  <button class="form-remove" type="button">Next</button>
</form>

Другой вариант - использовать делегирование событий, обрабатывая щелчки на элементе контейнера, в котором находятся все эти формы (body в вашем примере): 

document.body.addEventListener("click", function(e) {
    var btn = e.target.closest(".form-duplicate");
    if (btn && this.contains(btn)) {
        duplicate(btn);
        return;
    }
    btn = e.target.closest(".form-remove");
    if (btn && this.contains(btn)) {
        remove(btn);
        return;
    }
});

function remove(btn) {
    var form = btn.closest("form");
    form.parentNode.removeChild(form);
}

function duplicate(btn) {
    var form = btn.closest("form").cloneNode(true);
    document.body.appendChild(form);
}
<form class="f0" action="action.php">
  <input type="text" name="name" id="name" required="">
  <button class="form-duplicate" type="button">Duplicate</button>
  <button class="form-remove" type="button">Next</button>
</form>

Обратите внимание, что closest является относительно новым, вам потребуется polyfill для IE.

...