4

我需要这样的东西。

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

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

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

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

4

4 回答 4

11

removeNode似乎不标准。尝试这个：

if(e && e.nextSibling) {
  e.parentNode.removeChild(e.nextSibling)
}
于 2013-06-27T11:23:44.410 回答
4

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

看起来好像实际上有一个函数可以让您在不引用父节点的情况下执行此操作；它被称为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>

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

于 2015-12-20T21:14:22.277 回答
2

而不是reomveNode尝试removeNode();。

于 2013-06-27T11:24:52.097 回答
2

你可以做这样的事情

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

于 2013-06-27T11:55:28.823 回答