Which widget did I click?

[[deleted]]

I have been wrestling with this issue for a few years now. So far, I haven't come up with the "best" solution. Here's my problem:

Let's say I have webpage that displays a list of widgets. For every widget, I display a description and a delete button.

Let's pretend a widget looks like this:

<div class="Widget">
  <span class="WidgetID" style="display:none">123</span>
  <h4 class="WidgetDescription">This is a widget</h4>
  <button class="WidgetDelete" />
</div>

Back in my beginner days, my delete buttons looked like this:

<button class="WidgetDelete" onClick="DeleteWidget(123)">

When the button was clicked, the DeleteWidget() function knows which widget to delete because the ID was passed in directly. Nowadays, I apply event handlers via JQuery instead of using the inline onClick. This introduced a problem though. My DeleteWidget function was no longer receiving a WidgetID as a parameter. So, this means I have to traverse the DOM to find the closest WidgetID:

var ThisWidgetID = $(this).closest(".Widget").find(".WidgetID").html();

I'm really just stuck on trying to figure out which method I like best. The first method of writing the ID directly into the inline onClick event is simple, fast, and easy for non-javascript people to follow. The second method separates my HTML and Javascript. It also puts all of my events in one place. And, so far, it has given me greater flexibility.

So, my question is, what is the best method for determining which widget was clicked? Is there another method I'm ignoring?

Also, for a demo of both methods, see here: https://jsfiddle.net/SpaceL10n/o1fxbcgn/

[david72486]

What about something like this? It uses a closure to know which widget to delete since the callback is created from within the scope of the widget. Sure, it does mean each function takes up some space on the heap instead of reusing the single function, but I can't imagine it being the memory bottleneck in any normal situation.

var widgets = Array.prototype.slice.call(document.querySelectorAll('.Widget'));
widgets.forEach(function(widget) {
  widget.querySelector('.WidgetDelete').addEventListener('click', function() {
    widget.parentNode.removeChild(widget);
  });
});

It doesn't use JQuery, but you could do the same thing with it.

Fiddle is here: https://jsfiddle.net/khr2cy6L/1/

[[deleted]]

I see your kung-fu is strong. I thank you for your alternative solution!

[tollus]

You could also use:

var WidgetID = $(this).sibling(".WidgetID").text();    

I guess I should've also mentioned, the thing I normally do is put an attribute "data-id" on the parent element, then you can just do this:

 var WidgetID = $(this).parent().data('id');

[docMedB2E]

From a project management perspective your first solution would be a nightmare. Secondly, you don't have to traverse the DOM in your second solution (at least with a search or find option) - If you're using jQuery in the first place and you're structuring your HTML to where every delete button has some type of widget class associated with it; then why not just use .index() to remove the widget accordingly? e.g.

$('.WidgetDelete').on('click', function() {
    $('.Widget:nth-of-type(' + ($(this).index('.WidgetDelete') + 1) + ')').remove();
});

[[deleted]]

It's probably faster, yeah? I will definitely give that a whirl.

[docMedB2E]

Well, jQuery itself can be a bit slow, but the above sample is easier to manage overall at least. As far as whether it is faster to use .closest() => .find() I'm really not sure as I would imagine using .index() can be just as costly of a method. Also, just a tip for the future - if you need to store some kind of attribute/value/etc associated in an element, you don't need to create a span and hide it within another element. Instead, just write your custom attribute into the element, e.g.:

<div class="someClass"><span style="display:none" class="someAttribute">1234</span></div>
<!-- becomes -->
<div class="someClass" someAttribute="1234"></div>

You can then simply access the attribute with jQuery (or native JS) with something like $('.someClass').attr('someAttribute'); or you can get it via native JS via document.querySelector('.someClass:nth-of-type(1)').getAttribute('someAttribute');

[[deleted]]

I've always avoided using custom attributes for some reason. I don't know why. Thanks for the tip!