Я пытаюсь создать форму, которая позволяет пользователю вводить серию электронных писем, динамически добавляя новое текстовое поле. Я следил за этой реализацией здесь, которая хорошо работает: https://stackoverflow.com/questions/34748659/dynamically-add-and-remove-textboxes-and-get-value-of-dynamic-textbox-using-jque
Единственное изменение, которое я сделал, из-за которого кнопка «удалить» внезапно перестала работать, это добавление метки между полями ввода, как показано ниже:
jQuery(document).ready( function () {
$("#append").click( function(e) {
e.preventDefault();
var urlParams = new URLSearchParams(window.location.search);
var domain = urlParams.get('domain');
//console.log(domain);
// document.getElementById('domain').innerHTML = domain;
$(".inc").append(`<div class="controls">\
<input class="form-control" type="text" id="email" name="email" placeholder="email">\
<labe>@</label>\
<input class="form-control" type="text" id="domain" name="domain" disabled="disabled" value="${domain}">\
<a href="#" class="remove_this btn btn-danger">remove</a>\
<br>\
<br>\
<br>\
</div>`
);
return false;
});
jQuery(document).on('click', '.remove_this', function() {
jQuery(this).parent().remove();
return false;
});
$("input[type=submit]").click(function(e) {
e.preventDefault();
$(this).next("[name=textbox]")
.val(
$.map($(".inc :text"), function(el) {
return el.value
}).join(",\n")
)
})
});
Проблема в том, что кнопка «удалить» теперь удаляет только:
<labe>@</label>\
<input class="form-control" type="text" id="domain" name="domain" disabled="disabled" value="${domain}">\
при выходе из первого текстового поля:
<input class="form-control" type="text" id="email" name="email" placeholder="email">\