How to check if element is last child without JQuery

Question

I have a pure Javascript script with an onclick event that checks the value of the next sibling before deciding what to do. This will cause an error if the element clicked is the last element in its container (because of accessing nextSibling). I need to first check that the element clicked is not the last element in the container, but can't seem to find out how.

Note: I don't think this is a duplicate. There are quite a few questions about checking if an element is the last child, but all accepted answers—all answers in general—use JQuery.

Answer 1

The error you get should be some kind of can't set property on undefined.

You have just to check whether the next element exists:

if (typeof element.nextSibling === "undefined")
    return;

Answer 2

You can use the node.lastChild Property

The Node.lastChild read-only property returns the last child of the node. > If its parent is an element, then the child is generally an element node, > a text node, or a comment node. It returns null if there are no child elements..

var tr = document.getElementById("row1");
var corner_td = tr.lastChild;

Answer 3

For some reason none of the answers worked for me, I always ended up seeing a #text node instead of undefined or null, so I ended up comparing my element with the last child of the parent of the element:

element === element.parentNode.children[element.parentNode.children.length-1] 

or if you want it as a function

function isLastChild(el) {
  return (el === el.parentNode.children[el.parentNode.children.length-1]) 
}

//Useage
if(isLastChild(el)) {
  //Element is the last child of its parent.
}

Might be longer than other answers but surly won't fail you.

Answer 4

Accessing an element's nextSibling element you'll get null if the element has no next sibling, so you can just check before going on with your code, like this:

if (myElement.nextSibling) {
    // the element has a next sibling
    // go on...
} else {
    // the element is the last child
}

Answer 5

Use the .lastChild property of the node.

Example:

Here, we are removing last 4 child nodes in the list.

function clearAll() {
    var sidemenu = document.getElementById('side_menu');
    
    console.log("sidemenu.childNodes.length = " + sidemenu.childNodes.length);

    while (sidemenu.childNodes.length > 2) {
        console.log(sidemenu.childNodes);
        sidemenu.removeChild(sidemenu.lastChild);
        console.log("removed");
        console.log("sidemenu.childNodes.length = " + sidemenu.childNodes.length);
    }
    
    console.log("What we have left now:");
    console.log(sidemenu.childNodes);
}

clearAll();

<ul id="side_menu">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
</ul>

Learn more: Node.lastChild - Web API Interfaces | MDN

Answer 6

This is one way to check:

document.querySelector(":last-child");

Here's one more:

var isLastChild = (element === element.parentNode.lastChild);

Answer 7

If you're trying to make this compatible with older browsers, just use childNodes:

// Last element in the body
document.getElementsByTagName('body')[0].childNodes[document.getElementsByTagName('body')[0].childNodes.length-1]

so for your particular problem, use the event object in your onclick:

element.onclick = function(event) {
    var parent = event.target.parentNode;
    if(event.target === parent.childNodes[parent.childNodes.length-1])
        // Code here
}

Answer 8

How about var isLastChild = element === element.parentNode.lastChild?

Answer 9

Ask if there is a next element or not to know if it is the last or not:

if (typeof element.nextElementSibling == null) {
    //is last
    return;
} else {
    //is not last
}

Answer 10

you must use nextElementSibling, no nextSibling or typeof ...

function isLastElement(element) {
    return element.nextElementSibling === null;
}