Select Page

Selecting the Last Matching DOM Node in Javascript

Posted on May 12, 2017
James Quick, Social Developer

I’ve found that problems I come across and find solutions to at work would make for great blog posts, no matter how small.  At the very least, documenting it helps reinforce what I learned and gives me a reference to go back to (and hopefully a reference for you in the future for that matter).  So, here’s one from today, how to select the last DOM Node in Javascript.

The Scenario

I was working on a page that used Drag and Drop (also a new topic for me and will be a post soon 🙂 ) and had two boxes that you can drag items to.  Once you drag an item to each box you can submit the combination of the two.  On submit, I wanted to reset the form, essentially clearing out the items that I dragged there previously.  My way of “clearing” the boxes was to set their innerHTML to an empty string.

 element.innerHTML = "";

They both had the ‘drop-target’ class, so getting the first one was easy.

var element = document.querySelector('.drop-target');
element.innerHTML = "";

Then, I paused on how to get the second one. I knew how to select the first of a matching node with document.querySelector and how to get a list of matching nodes with document.querySelectorAll, but didn’t know right off hand how to get the last of a matching node.

The Solution

After about five minutes, I came up with such a simple solution that, honestly, I felt dumb for not having come up with it immediately. I just gave each of the two elements their own ID and selected by that, which made sense since the two different boxes did serve slightly different purposes. So, this is what it became.

var origin = document.querySelector('#origin-box');
origin.innerHTML = "";
var destination = document.querySelector('#destination-box');
destination.innerHTML = "";

That ended up being so simple I feel like it isn’t even worth a blog post by iteself. So, I figured I would also cover a scenario where we have many ‘drop-targets’.  Even if they do each have their own id of the same format(box-1, box-2, etc.) , we might not know the id of the last one specifically.  In that situation, how do we get the last one?

A quick solution to this is just get all of the ‘drop-target’ nodes using querySelectorAll. Then, we can access the last one accessing the index of length (length of the returned node list) – 1. Looks like this.

var dropTargets = document.querySelectorAll('.drop-target');
var lastTarget = dropTargets[dropTargets.length-1];
lastTarget.innerHTML = "";

The downside to this comes when we have tons of different nodes that match that class. Let’s say we have hundreds, for example, then, we don’t want to get all of those nodes if we only want to do something specific to the last one.  So, what do we do?  Well, I would recommend giving that last element it’s own special id like #drop-target-last that we can get like this.

var lastTarget = document.querySelector('#drop-target-last');
lastTarget.innerHTML = "";

Honestly, if you read through this and found it all to be common sense, I wouldn’t be too surprised or offended.  Like I said, for the simple scenario I had, I shouldn’t have even had to hesitate.  Still worth the time to write it down though I think!  Thanks for reading.

Subscribe

Subscribe

Javascript. Node. Angular. Bootstrap. Wordpress. You name it.  If you are a current or aspiring web developer looking to learn more, then subscribe!  I will share the latest news and tutorials as well as exclusive assets.

Thank you for subscribing!

Pin It on Pinterest

Share This

Share this post with your friends!