如何使用 JavaScript 删除下一个元素（不使用 jQuery）答案

【问题标题】：How to remove next element using JavaScript (without using jQuery)如何使用 JavaScript 删除下一个元素（不使用 jQuery）
【发布时间】：2013-06-27 11:20:39
【问题描述】：

我需要这样的东西。

<a onclick="SaveNote(this);" >Save</a>
<a href="javascript:void(0);" id="112">Cancel</a>
<a href="javascript:void(0);" id="112">Delete</a>

如果我单击Save 锚点，我想删除所有三个锚点元素，如上所示，不使用任何id，并将它们替换为Edit 锚点。我目前有一些看起来像这样的 Javascript 代码：

function SaveNote(e){
   e.nextSibling.removeNode;
   e.nextSibling.removeNode;
   e.nextSibling.removeNode;
}

你对这个问题有什么想法吗？

【问题讨论】：

removeNode 拼写错误，应该是 removeNode()，因为它是一个函数

标签： javascript dom removechild appendchild createelement

【解决方案1】：

removeNode 似乎是非标准的。试试这个：

if(e && e.nextSibling) {
  e.parentNode.removeChild(e.nextSibling)
}

【讨论】：

【解决方案2】：

我想做与提到的这个问题相同的事情，但不引用父节点。经过一番谷歌搜索，这是我发现的！

看起来好像实际上有一个函数可以让您在不引用父节点的情况下执行此操作；它被称为remove();。

这是一个演示。

function removeNextNode(elem) {
  elem.nextElementSibling.remove();
}

a {
  display: block;
}

<a onclick="removeNextNode(this);" href="#">Click to remove the next node...</a>
<a href="#">another node</a>
<a href="#">another node</a>
<a href="#">another node</a>
<a href="#">another node</a>
<a href="#">another node</a>
<a href="#">another node</a>

如果此答案可以改进，请发表评论。

【讨论】：

好像 IE 不支持它看MDN

【解决方案3】：

你可以这样做

HTML

<div>Stuff before</div>
<div>
    <a id="save" href="#">Save</a>
    <a id="cancel" href="#">Cancel</a>
    <a id="delete" href="#">Delete</a>
</div>
<div>Stuff after</div>

Javascript

function emptyNode(node) {
    while (node.firstChild) {
        node.removeChild(node.firstChild);
    }
}

function saveNote(e) {
    var parent = e.target.parentNode,
        edit = document.createElement("a");

    emptyNode(parent);

    edit.id = "edit";
    edit.href = "#";
    edit.appendChild(document.createTextNode("Edit"));
    parent.appendChild(edit);
}

document.getElementById("save").addEventListener("click", saveNote, false);

开启jsfiddle

注意：这需要支持addEventListener，这很容易处理

【讨论】：

谢谢，但我们还需要删除“保存”按钮并添加另一个按钮，例如“编辑”
这很容易添加到saveNote，但不在您的原始问题中。
是的，我知道，但我们需要这个谢谢
添加了您的附加要求。
我的所有要求都已解决，但我们还有一个额外要求，即在三个按钮的位置添加一个“编辑”按钮。

【解决方案4】：

试试removeNode();，而不是reomveNode。

【讨论】：

感谢大家为我的问题花费宝贵的时间。我想出了一个解决方案 while(e && e.nextSibling) { e.parentNode.removeChild(e.nextSibling); } e.parentNode.removeChild(e);