How to remove next element using JavaScript (without using jQuery)

Question

I need something like this.

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

If I click on the Save anchor , I want to remove all three anchor elements as shown above, without using any id, and replace them with an Edit anchor. I currently have some Javascript code that looks something like this :

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

Have you any idea regarding this issue?

Valency

removeNode spelling is wrong and it should be removeNode() as it is a function – Natality

Answer 1

You could do something like this

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

On jsfiddle

Note: this requires support of addEventListener which is easily dealt with

Ruddie

Thanks , but we need to remove also "save" button and add another button something like "edit" – Valency

That is very easy to add to saveNote but was not in your original question. – Ruddie

Yes I know , but we need this Thanks – Valency

Added your additional requirement. – Ruddie

All my requirement has been solved but we have an additional requirement for add a "edit" button at place of three button. – Valency

I have not getting any idea how to Added additional requirement ? – Valency

Answer 2

removeNode seems to be non standard. Try this:

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

Overmuch

Answer 3

I was wanting to do the same thing as this question mentioned but without referencing the parent node. After some googling this is what I found!

It appears as though there is actually a function that will let you do this without referencing the parent node; it is called remove();.

Here is a demo.

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>

Please post a comment if this answer can be improved.

Dyedinthewool

It loos like IE does not support it see MDN – Boaten

Answer 4

Instead of reomveNode try removeNode();.

Epochmaking

Thanks Everyone for spend you valuable time for my issue. I have coined out a solution while(e && e.nextSibling) { e.parentNode.removeChild(e.nextSibling); } e.parentNode.removeChild(e); – Valency