我有一个简单的表单,可以在其中借助按钮添加输入字段。还有一个按钮可以删除div中的输入字段。我使用了.remove()
函数(从SO中的答案中得到),该函数删除了第一个div,但是它没有删除第二个或我在Add Field
按钮的帮助下添加的一个。现在没有任何解决方案,这似乎是一个独特而奇怪的问题。有人可以帮我吗?这是代码:
const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const deleteBtn = document.querySelector(".delete-btn");
const urlDiv = document.querySelector(".url-pair");
const html = `
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
`;
const deleteField = function(e) {
urlDiv.remove();
}
addBtn.addEventListener('click', () => {
span.insertAdjacentHTML("beforeBegin", html);
});
deleteBtn.addEventListener('click', deleteField);
<form action="#" method="POST">
<div class="urls-container">
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
<span></span>
</div>
<div>
<div>
<button type="button" id="addField">Add Url</button>
</div>
<div>
<button type="submit">Create</button>
</div>
</div>
</form>
答案 0 :(得分:3)
const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const html = `
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
`;
addBtn.addEventListener('click', () => {
span.insertAdjacentHTML("beforeBegin", html);
});
// listening click event on form element
form.addEventListener('click', e => {
// target holds the specific HTMLElement which was clicked
const target = e.target;
// check if clicked element has class delete-btn, if no, stop
if (!target.classList.contains('delete-btn')) return; // it was clicked outside the delete-btn
// yes, the button was clicked
e.target.parentElement.remove(); // now remove its parent i.e div.url-pair from the DOM tree
});
<form action="#" method="POST">
<div class="urls-container">
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
<span></span>
</div>
<div>
<div>
<button type="button" id="addField">Add Url</button>
</div>
<div>
<button type="submit">Create</button>
</div>
</div>
</form>
答案 1 :(得分:0)
您需要删除带有url-pair AND委托类的父级
这是我能让你做的最简单的脚本
window.addEventListener("load", function() {
const container = document.querySelector(".urls-container");
const html = container.querySelector(".url-pair").cloneNode(true); // wee need an empty copy
document.getElementById("addField").addEventListener('click', () => {
container.appendChild(html.cloneNode(true)); // take a copy
});
document.querySelector(".urls-container").addEventListener("click", (e) => {
const tgt = e.target;
if (tgt.classList.contains("delete-btn")) {
tgt.closest("div.url-pair").remove();
}
})
})
.urls-container .url-pair:first-child .delete-btn {
display: none;
}
<form action="#" method="POST">
<div class="urls-container">
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
</div>
<div>
<div>
<button type="button" id="addField">Add Url</button>
</div>
<div>
<button type="submit">Create</button>
</div>
</div>
</form>
答案 2 :(得分:0)
尝试使用e.target.parentElement.remove();
。
由于元素是动态生成的,因此需要delegate
event处理程序。
使用如下所示的事件。
document.addEventListener('click', function(event) {
if (Array.from(event.target.classList).includes('delete-btn')) {
event.target.parentElement.remove();
}
});
您可以在下面测试输出。
const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const deleteBtn = document.querySelector(".delete-btn");
const urlDiv = document.querySelector(".url-pair");
const html = `
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
`;
const deleteField = function(e) {
urlDiv.remove();
}
addBtn.addEventListener('click', () => {
span.insertAdjacentHTML("beforeBegin", html);
});
document.addEventListener('click', function(event) {
if (Array.from(event.target.classList).includes('delete-btn')) {
event.target.parentElement.remove();
}
});
<form action="#" method="POST">
<div class="urls-container">
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
<span></span>
</div>
<div>
<div>
<button type="button" id="addField">Add Url</button>
</div>
<div>
<button type="submit">Create</button>
</div>
</div>
</form>
答案 3 :(得分:0)
您仅将事件绑定到第一个按钮,并且仅删除第一个元素。
enableEndsAt()
const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const deleteBtn = document.querySelectorAll(".delete-btn");
const urlDiv = document.querySelector(".url-pair");
const html = `
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
`;
const deleteField = function(e) {
e.target.closest(".url-pair").remove();
}
addBtn.addEventListener('click', () => {
span.insertAdjacentHTML("beforeBegin", html);
btnList = document.querySelectorAll('.delete-btn');
btnList[btnList.length-1].addEventListener('click', deleteField);
});
Array.from(deleteBtn).forEach((btn) => btn.addEventListener('click', deleteField));
答案 4 :(得分:-1)
m.addConstrs((quicksum(x[i])+quicksum(y[i]) == 1 for i in P)
m.addConstrs((quicksum(x[i])+quicksum(y[i]) == -1 for i in D)
const form = document.querySelector("form");
const span = document.querySelector("span");
const addBtn = document.querySelector("#addField");
const deleteBtnList = document.querySelectorAll(".delete-btn");
const html = `
<div class="url-pair">
<input type="url" autofocus="true">
<input type="number" value="50%">
<button class="delete-btn" type="button">Delete</button>
</div>
`;
const deleteField = function(e) {
e.target.parentElement.remove();
}
addBtn.addEventListener('click', () => {
span.insertAdjacentHTML("beforeBegin", html);
});
Array.from(deleteBtnList).forEach(elem => {
elem.addEventListener('click', deleteField);
});