[DeathArrow]

I rather not write 10 lines of Vanilla JS when I can write a line using jQuery. And I do prefer jQuery-style syntax for manipulating the DOM.

[pseudosavant]

Absolutely. I stopped using actual jQuery a while ago in favor of a light (78 loc) wrapper around the native DOM that mostly uses the jQuery API. jQuery has a really well thought out fluent API.

https://gist.github.com/pseudosavant/b86eedd9960ade958d49447...

[hu3]

This doesn't have closest(), next(), prev(), siblings() and a bunch of other DOM traversers.

[atoav]

As somwone who constantly replaces jquey with vanilla js the difference is more like two lines of jquery against 3 lines of vannila js.

One line more. But you have one dependency less, which is quite beneficial

[pseudosavant]

Update: fixed formatting

A lot of times the jQuery syntax is easier to understand (IMO).

Remove element exmample:

jQuery API:

  $('.element').remove()

DOM API:

  document.querySelector('.element').parentNode.removeChild(document.querySelector('.element'))

or if you want to introduce another variable just to remove the element:

  const child = document.querySelector('.element');
  child.parentNode.removeChild(child);

Create element example:

jQuery API:

  const fooElement = $('<div class="foo" style="display: none">')

DOM API:

  const fooElement = document.createElement('div');
  fooElement.classList.add('foo');
  fooElement.setAttribute('style', 'display: none');

I know which ones I'd rather write and read.

[egeozcan]

HTMLElement.prototype.remove exists everywhere except IE:

https://developer.mozilla.org/en-US/docs/Web/API/Element/rem...

Also for element creation:

Object.assign(document.createElement("div"), { class: "foo", style: "display:none" });

I mean, you normally abstract these things with a helper fn or two, without importing the whole jQuery anyway.

[wvenable]

> I mean, you normally abstract these things with a helper fn or two, without importing the whole jQuery anyway.

Add enough helper functions are you're at jQuery anyway. Looking at the jQuery source code, it manages a lot of edge cases that I don't really have time to figure out on my own.

The DOM API isn't really designed that well for human consumption.

https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeTy...

[ratww]

> Add enough helper functions are you're at jQuery anyway.

I really hate these exaggerations. jQuery is, last I checked, over 200k unminified. Anyone writing enough helper functions to get to a fraction of that is already a pathological case.

[wvenable]

Browsing the source of jQuery and I don't find it bloated but I find a lot of knowledge in there that a naive user the DOM API would most likely know about.

It's kind of like how you can comparing languages using simple example code isn't relevant because proper code with full error handling and edge case handling can be very different from a naive example.

[adhesive_wombat]

> Looking at the jQuery source code, it manages a lot of edge cases that I don't really have time to figure out on my own.

Reminds me of the warning about rewriting old "messy" codebases. I am paraphrasing, but the upshot was "You know what those weird and ugly bits of code are? They're bug fixes, and they were earned through sweat and blood and years over a period of many, many years."

[egeozcan]

You need to write a lot of helpers to come close to jQuery. Also edge cases aren't that big of a deal now that IE is near it's EOL.

[wvenable]

I'm not talking about browser edge cases, I'm talking about API edge cases. The DOM API is not very human-friendly.

[cogman10]

IE 11 hits it’s EOL next month. So, really probably not a whole lot of reason not to just pull the trigger and inform everyone that complains of this fact.

[mikojan]

Or you could just do document.querySelector('.element').remove()

[yakshaving_jgt]

JavaScript:

    var xs = document.querySelectorAll('.x');

    for (var i = 0; i < xs.length; i++) {
      xs[i].addEventListener('click', function() {
        this.style.display = 'none';
      });
    }

jQuery:

    $('.x').on('click', function() { $(this).hide() });

ಠ_ಠ

[recursive]

Also javascript

    document.body.addEventListener("click", ev => ev.target.classList.contains('x') && ev.target.hidden = true);

[jokethrowaway]

jQuery emerged from the market and it's pretty close to what developers wanted to express.

JS is design by a committee full of people afraid to come out as "not-as-kind" and completely detached from reality.

True, doing some of the things which were half an hour on stack overflow or 1 line of jQuery became a couple of lines of vanilla JS but the API is still pretty awful.

Think about XHR > fetch vs $.get or $.post

I agree, I'll try to use vanilla JS and google something when I need to ship some code - but for hacking around I'll just bring in jQuery and write 1-liners at blazing speed.

[smrtinsert]

Exactly, I don't know why people have to pit jQuery against the current generation of ui or vdoms etc. Just because you have a car doesn't mean a bike doesn't have its uses.

These threads are completely ridiculous.