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

Question

我需要类似这样的东西。

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

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

- aman

---

removeNode的拼写错误了，应该是removeNode()，因为它是一个函数。 - Parthik Gosar

Answer 1

removeNode 似乎不是标准的。请尝试这样做：

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

- user405398

Answer 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>

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

- www139

---

看起来IE不支持它，请参考MDN。 - Ronnie Royston

Answer 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，这很容易处理。

- Xotic750

---

谢谢，但我们还需要移除“保存”按钮，并添加另一个按钮，类似于“编辑”。 - aman

这很容易添加到saveNote中，但不在您最初的问题中。 - Xotic750

是的，我知道，但我们需要这个。 - aman

添加了您的额外要求。 - Xotic750

所有我的需求都已经解决了，但我们有一个额外的需求，在三个按钮的位置上添加一个“编辑”按钮。 - aman

我不知道如何添加额外的要求。 - aman

Answer 4

尝试使用removeNode();而不是reomveNode。

- Wellington Zanelli

---

感谢大家抽出宝贵的时间来帮我解决问题。 我已经想出了一个解决方案。while(e && e.nextSibling) { e.parentNode.removeChild(e.nextSibling); } e.parentNode.removeChild(e); - aman