Как удалить следующий элемент с помощью 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>

Пожалуйста оставить комментарий, если этот ответ может быть улучшена.