[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.

[ratww]

That's not the point.

The point is that this is a strawman. "Enough helper functions" to get to jQuery is 288580 bytes. A quarter of that, or even a tenth of that, is already a pathological case and way beyond almost every case of "jQuery substitution" that would happen in practice.

[wvenable]

I could read and understand the entire jQuery source code in a single afternoon -- it's not that big. Even in the few minutes I spent reading it, I learned a few things I didn't know.

The worst thing about the web as a platform is the need to count bytes.

[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.

[cxr]

I don't find the jQuery API to be particularly friendly. It tries to be cute and ends up being annoying. Its implementing code is also an abomination, so not particularly helpful. I'd rather read through Gecko internals than try to figure out what the hell a jQuery helper actually returns.

The DOM is at least very, very well documented. jQuery has documentation, but it's not even close. It gives away what jQuery always has been, which is a library that is aimed mainly at assisting bag-of-tricks StackOverflow programmers than people who actually want to understand their programs and the object graph they work on.

[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()