jQuery: if inside a chain?

Question

I have this

if(noDelay){
  $(element).find("." + options.class).remove();
} else {
  $(element).find("." + options.class).fadeOut().remove();
}

Is there a way I could avoid repeating the sentence and only add the fadeOut() when a given condition is met?

I can't move fadeOut() till the end of the chain, which probably would've made things easier.

I'm thinking something like

$(element).find("." + options.class).(if(noDelay) fadeOut()).remove();

Thanks in advance, Leo

Answer 1

There is nothing documented like you want but maybe this will work for you:

$(element).find("." + options.class).fadeOut(noDelay ? 0 : 400).remove();

Why 400, because the default duration for fadeOut is 400 milliseconds. (from documentation)

Answer 2

You could do this with a $.fn.each:

$(element).find("." + options.class).each(function(){
  if (nodelay) {
    $(this).remove();
  }
  else {
    $(this).fadeOut().remove();
  }
});

however it is far less efficient than simply doing what you already are doing.

Edit: here's another way to do it:

$(element).find("." + options.class)[  noDelay ? "detach" : "fadeOut"  ]().remove();

basically, if noDelay is true, it will detach the elements before removing, else, it will fade them out before removing. Should be just as efficient as your code, just on 1 line.

Answer 3

Any objection to something like this?

var $found = $(element).find("." + options.class);
if (noDelay){
  $found.remove();
} else {
  $found.fadeOut().remove();
}

Answer 4

var els = $(element).find("." + options.class);
if (!nodelay) els.fadeOut();
els.remove();

Or you could use a horrible hack:

$(element).find(…)[ nodelay ? 'somenoopfunction' : 'fadeOut' ]().remove();

Answer 5

This particular problem:

Try rethinking the logic slightly, and make the noDelay actually effect the delay.

$(element).find("." + options.class).fadeOut(noDelay ? 0 : 'normal').remove();

Though I'm not sure if remove() is necessary.

When I was doing fadeOut() tests for another question, it seemed to hide and collapse the element. remove() would completely remove the element from the DOM, but I'm not sure it is necessary if you just want to make it disappear from the document and have it stop effecting document flow (no gap where it was).

Real goal:

Also, it looks like you're planning to wrap jQuery. You'll end up wrapping code like this:

$("someElement").find(".someClass").fadeOut().remove();

...and changing it to something like:

fadeOut("someElement", { "class" : "someClass" });

...or:

var element = new SomeClass("someElement");
element.options.class = "someClass";
element.fadeOut();

Unless you're planning on reusing that particular element a lot, I think you're going to be wasting your time. jQuery has pretty efficient syntax for one-off operations, and you can always store matched elements in a temporary variable.

If you have some other purpose in mind that I'm missing, please excuse this intrusion on your design :)