如何删除香草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的更多信息，您可以在这里检查:对于选项2，您要删除的元素应该位于具有类属性的单独容器中，这样才能正常工作。否则，可以删除要保留的元素。