How to prevent parentNode madness?

Question

I have a list of items which diferent event handlers on it.

...
<li>
   <div class="item" data-id="1234">
     <h3>Item</h3>
     <div class="description">...</div>
     <ul class="lists">
        <li data-list-id="1">Add to list A<li>
        <li data-list-id="2">Add to list B<li>
        <li data-list-id="3">Add to list C<li>
     </ul>
     <button class="delete">delete</button>
   </div>
</li>
...

Every li under .list has a click event registered which looks like this:

function addToList(event){
   var id = event.target.getAttribute('data-id');
   var listId = event.target.parentNode.parentNode.getAttribute('data-id');
   // XHR stuff
}

There is no problem with this code but the parentNode.parentNode seems really fragile. For the button would be only one parentNode and for deeper nested elements parentNode^n

I guess this is a common problem and there are more robust solutions? With jQuery i would use $(target).parentNode('.item')

Whats the best way to do this without jQuery?

I think you are looking for .closest. Have a look http://stackoverflow.com/questions/18663941/finding-closest-element-without-jquery — Aamir Afridi, May 21 '14 at 09:28
using jQuery you could just do in your callback: `$(this).closest('.item').data('id')` — vsync, May 21 '14 at 09:29
@Aboca : Aamir Afridi is mentioning `.closest` which is jQuery only... But you are right, the link points to a solution without jQuery. — Samuel Caillerie, May 21 '14 at 09:35

score 4 · Accepted Answer · answered May 21 '14 at 09:31

As part of my projects, I always write my own toolbox. Sure, I could use jQuery, but I'll stick to my precision toolkit over a sledgehammer, thanks!

With that in mind, have a look at this:

function findParent(source,filter,root) {
    root = root || document.documentElement;
    while(source != root) {
        if( filter(source)) return source;
        source = source.parentNode;
    }
}

In your case, you can now call:

var listId = findParent(
        event.target,
        function(e) {return e.attributes && e.attributes['data-id'];}
    ).getAttribute("data-id");
// note that you should probably break that down, checking if an element
// is found before getting its attribute value... or let the error
// kill your script. Either works.

Now, here it does look a bit more messy than your simple .parentNode.parentNode, but it's much more robust because it doesn't rely on depths being a certain number, which I believe is what you were aiming for.

shouldn't `e` (2nd `findParent` passed argument) be `event` instead? — BeNdErR, May 21 '14 at 09:39
@BeNdErR Nooooo... it's a callback parameter. I can call it `function(ickwibblyflopwob) {return ickwibblyflopwob.attributes && ickwibblyflopwob.attributes['data-id'];}` if I wanted to. — Niet the Dark Absol, May 21 '14 at 09:45
AAAAAAAAAAA I see it only now, you use it as a CB. My bad, sorry. — BeNdErR, May 21 '14 at 10:32

How to prevent parentNode madness?

1 Answers1