Make JavaScript functions for DOM chainable

Question

I have the following jQuery code:

$('.selector').removeClass('removed').addClass('added');

I am planning to write all my code in pure JavaScript, so I did this:

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className);
  else
    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
}

var element = document.querySelector(".selector");
removeClass(element, 'removed');
addClass(eleement, 'added');

It works as expected but I want the functions to be chainable in order to keep consistency. How can I do that?

I have two more questions:

Is removing jQuery dependency even worth it?
Are there any drawbacks of making these functions above (and others) chainable?

Thanks.

*Is removing jQuery dependency even worth it?* Probably Not. *Are there any drawbacks of making these functions above (and others) chainable?* Are there any considerable advantages of doing it? — Nisarg Shah, Jan 31 '18 at 05:55
One advantage I can think of is consistency. For example, `el.setAttribute()` and `el.removeClass()`. — Vineet Sharma, Jan 31 '18 at 05:56
Your functions would have to return some sort of object that had those functions as properties and also contained the element that you were operating on. — Herohtar, Jan 31 '18 at 06:07

Chirag Ravindra · Accepted Answer · 2018-01-31T06:22:30.253

Overriding the HTMLElement or Element class prototype is one way to do chainable methods.

HTMLElement.prototype.addClass = function (className) {
    let el = this;
    if (el.classList)
        el.classList.add(className);
    else
        el.className += ' ' + className;
    return this;
};
HTMLElement.prototype.removeClass = function (className) {
    let el = this;
    if (el.classList)
        el.classList.remove(className);
    else
        el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    return this;
};

Then you can do something like:

someElement.addClass('one').addClass('two').removeClass('one');

To answer your follow up question on removing jQuery, that would depend on your usecase. If you use jQuery only for simple DOM manipulation you can do away with it or use lighter alternatives like MinifiedJS. In the end it depends on the trade off between convenience methods (avoiding solving problems which are already solved) and script payload size. It is also worth mentioning that if payload size is the only problem, using jQuery through a CDN will ensure most of your users have it already cached in their browser. You can also make custom builds of jQuery with only the features you need.

As to your second follow up question, This may not be a very good idea in terms of code management, performance and cross browser compatibility. Check this question on SO and this linked article from one of the answers out for a detailed discussion on why

Make JavaScript functions for DOM chainable

1 Answers1