如何使用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;
}

你对这个问题有任何想法吗？

Answer 1

removeNode似乎不标准.试试这个:

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

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>

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

Answer 3

你可以做这样的事情

超文本标记语言

<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很容易处理