如何用原生JavaScript删除目标按钮前的指定元素且不影响其他内容？

我的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>

我的JavaScript代码 #

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>
        `);
    }
})

解决方案 #

方案1：基于现有结构直接删除前置元素 #

利用previousElementSibling属性逐个获取并删除目标按钮前的三个元素，最后删除按钮本身：

document.querySelector('.container').addEventListener('click', (e) => {
    if (e.target.classList.contains('removeItem')) {
        const btn = e.target;
        // 删除按钮前的3个元素
        for (let i = 0; i < 3; i++) {
            const prevEl = btn.previousElementSibling;
            if (prevEl) prevEl.remove();
        }
        // 删除按钮自身
        btn.remove();
    }
});

方案2：优化结构（更鲁棒的做法） #

依赖元素顺序的写法容易出错，推荐把每个新增项包裹在容器中，点击删除按钮时直接移除整个容器：

先修改添加元素的代码：

addItemBtn.addEventListener("click", (e) => {
    if (createBinModalForm.checkValidity()) {
        addItemBtn.insertAdjacentHTML('beforebegin', `
        <div class="item-group">
            <hr/>
            <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>
        </div>
        `);
    }
})

再修改删除逻辑：

document.querySelector('.container').addEventListener('click', (e) => {
    if (e.target.classList.contains('removeItem')) {
        // 找到父容器并删除
        e.target.closest('.item-group').remove();
    }
});

这种方式不依赖元素顺序，后续结构调整也不容易出问题，是更推荐的实现方式。

内容的提问来源于stack exchange，提问作者Rosa Parks