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.
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.