如何使用 JavaScript(js) 克隆和删除 html 表单?
How can I clone and remove a html form with JavaScript(js)?
我想克隆一个表单,然后可以选择删除我刚刚创建的表单。我知道如何克隆它,但不知道如何删除它。我只能删除原始表格,而不能删除克隆表格。
这是我的代码:
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>
你根本不需要 id
s。
最小的变化是将 this
从 onclick
传递到 remove
(并且,由于您不希望它提交表单,因此给它一个 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
,因为它不需要并且会被上面的重复。
实例:
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
相对较新,您需要 IE 的 polyfill。
我想克隆一个表单,然后可以选择删除我刚刚创建的表单。我知道如何克隆它,但不知道如何删除它。我只能删除原始表格,而不能删除克隆表格。
这是我的代码:
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>
你根本不需要 id
s。
最小的变化是将 this
从 onclick
传递到 remove
(并且,由于您不希望它提交表单,因此给它一个 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
,因为它不需要并且会被上面的重复。
实例:
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
相对较新,您需要 IE 的 polyfill。