如何在单击按钮时删除 DOM 元素

How do I delete DOM element on a button click

本文关键字：删除 DOM 元素 按钮 单击      更新时间：2023-09-26
function removeDOM() {
debugger;
alert('sahd');
}
<div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv">
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(); return false;" />
    </div>

上面是我的代码，它呈现了三个标签和三个按钮。如果我单击第一个按钮，则应删除Abcd1标签。

我可以在 removeDOM 函数中使用以下代码吗？

$(this).parents('label').remove();

你需要将点击的元素传递给函数

<div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv">
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
</div>

然后

function removeDOM(el) {
    el.parentNode.removeChild(el.previousElementSibling)
}

演示：小提琴 - 支持的 IE>= 9

您可以使用 element.previousSibling 执行此操作，请尝试以下代码：

  function removeDOM(button) {
    var previuosLabel;
    // always remove the white space between the button and the label
    while((button.previousSibling).nodeType !== 1) { 
            button.parentNode.removeChild((button.previousSibling));
    } 
    previuosLabel=button.previousSibling;
    if(previuosLabel.nodeType === 1) { 
        button.parentNode.removeChild(previuosLabel);
    }  
  }

然后这样称呼它：

<input type="button" onclick="removeDOM(this); return false;" />

这将始终检查button和label之间是否有空白，并在删除label之前将其删除，在这种情况下，请确保标签将被删除。

这是一个工作小提琴

更新您的onclick s以将this传递到函数中：

onclick="removeDOM(this); return false"

。然后在 removeDOM 中，您可以使用参数的 previousSibling 或 previousElementSibling 属性。

function removeDOM(element) {
    element.previousElementSibling.remove();
}

这假设兄弟姐妹在那里。如果可能不是：

function removeDOM(element) {
    if (element.previousElementSibling) {
        element.previousElementSibling.remove();
    }
}

现场示例：

function removeDOM(element) {
    if (element.previousElementSibling) {
        element.previousElementSibling.remove();
    }
}
<div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv">
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
</div>

如果您需要支持较旧的浏览器，它们可能没有 previousElementSibling 或 remove ，这使事情复杂化：

function removeDOM(element) {
    var prev;
    for (prev = element.previousSibling; prev; prev = prev.previousSibling) {
        if (prev.nodeType === 1) { // Element
            prev.parentNode.removeChild(prev);
            break;
        }
    }
}

现场示例：

function removeDOM(element) {
    var prev;
    for (prev = element.previousSibling; prev; prev = prev.previousSibling) {
        if (prev.nodeType === 1) { // Element
            prev.parentNode.removeChild(prev);
            break;
        }
    }
}
<div style="padding-top:8px;padding-left:5px;border:solid;border-color:black;border-width:thin;width:350px;height:75px;" id="divv">
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
    <label>Abcd1</label>
    <input type="button" onclick="removeDOM(this); return false;" />
</div>

相关文章：