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

你可以做這樣的事情

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這是很容易處理

Answer 2

removeNode似乎是非標準的。試試這個：

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

Answer 3

而不是reomveNode嘗試removeNode();。

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

請發表評論，如果這個答案可以得到改善。