如何在普通JavaScript中删除另一个元素之前的元素

Question

这是我的html:

<input type="text" class="form-control mt-3" placeholder="Item name" aria-label="Item name" required>
<input type="file" class="form-control mt-3" required>
<button type="button" class="btn btn-danger mt-3 w-100 removeItem">Remove item</button>

这是我的JS:

document.querySelector('.container').addEventListener('click', (e) => {
if (e.target.classList.contains('removeItem')) {
// e.target.insertAdjacentHTML('beforebegin', 'test');
console.log(e.target.parentNode)
}
});
addItemBtn.addEventListener("click", (e) => {
if (createBinModalForm.checkValidity()) {
addItemBtn.insertAdjacentHTML('beforebegin', '<hr/>');
addItemBtn.insertAdjacentHTML('beforebegin', `
<input type="text" class="form-control mt-3" placeholder="Item name" aria-label="Item name" required>
<input type="file" class="form-control mt-3" required>
<button type="button" class="btn btn-danger mt-3 w-100 removeItem">Remove item</button>
`);
}
})

如何在单击目标按钮之前使用此JavaScript删除这三个元素，但是。没有别的吗？

Answer 1

您可以使用Element.previousElementSibling在之前获取元素，然后使用.remove((将其移除。类似这样的东西：

const deleteElementsButton = document.getElementById("deleteElementsButton");
deleteElementsButton.addEventListener("click", function(event) {
const button = event.target;
for (let i = 0; i < 3; i++) { // how many elements do you want to delete
const nextSibling = button.previousElementSibling.remove(); // removes the element just before the button
}
})

<div>Previews element 1</div>
<div>Previews element 2</div>
<div>Previews element 3</div>
<div>Previews element 4</div>
<button id="deleteElementsButton">Delete previews 3 elements</button>

更多信息请点击此处：https://gomakethings.com/how-to-get-the-next-and-previous-siblings-of-an-element-with-vanilla-js/

Answer 2

选项1：要删除项目，应使用该项目的名称elementToDelete.remove()。有关更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

选项2：如果你想删除多个元素，你可以使用innerHTML。因此，如果你想删除你的HTML容器，你应该使用document.querySelector('.container').innerHTML = “<div>Here you should enter the HTML code you need or want.</div>”;有关innerHTML的更多信息，您可以在此处查看：https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML关于选项2，要删除的元素应该在具有class属性的单独容器中，这样才能工作。否则，您可以删除要保留的元素。