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

You can use the .nextSibling property on the element and see if it comes back as empty (undefined, etc).

Answer 2

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.