DomNodeInserted and DomNodeRemoved now deprecated

[Dani]

Ashamedly, I'm a jQuery user with very weak Javascript skills.

However, I noticed that Google Chrome DevTools console is giving me the following warning:

Listener added for a synchronous 'DOMNodeRemoved' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

... as well as a similar warning for DomNodeInserted.

I'm horrible with Javascript. Can someone give me Javascript code I can copy/paste to replace what I currently have? This is my code:

$('#element').on('DOMNodeInserted DOMNodeRemoved', function(event) {
    function_call();
});

[pritaeas]

I only found that you can use MutationObserver.

[Dani]

Yes, but every Google search I’ve done has a code example that seems rather long-winded, a bit confusing, and not well commented, so I didn’t understand what I was looking at. Also, every code example did something slightly different, which didn’t help matters.

[Dani]

I received some awesome help from someone I had previously hired on Upwork to help me with a JS project related to the DaniWeb editor.

Here is my actual (working) code:

// DOMNodeInserted DOMNodeRemoved have been deprecated!
/*
added_tags.on('DOMNodeInserted DOMNodeRemoved', function() {
    check_new_tags_status();
});
*/

const observer = new MutationObserver(check_new_tags_status);
observer.observe(added_tags[0], { subtree: true, childList: true });

Albeit, this fires anytime there has been any change, so it's a little more inefficient than I'd like (as it does trigger a couple more times than required, but the cost of check_new_tags_status() is incredibly low, so I'm not overly concerned, and it got rid of the deprecation warning.

Here is his sample code for specifically what I'm looking for:

const observer = new MutationObserver((mutations) => {
  // Only call function_call if one of the mutation's type is childList
  if (mutations.find((x) => x.type === "childList")) {
    // Call function_call.
    function_call();
  }
});

// Observe for changes in #element and its descendents.
observer.observe(document.querySelector("#element"), {
  subtree: true,
  childList: true,
});

I'm not using it yet because I have super bad brain fog, and I can't fully wrap my mind around what I'm reading. So I'll tackle this once I'm feeling a tad better.

[Mason_4]

You could try the Mutation Events polyfill: https://github.com/mfreed7/mutation-events-polyfill (or here on npm https://www.npmjs.com/package/mutation-events). I'd be curious to hear if it works for you.

[Dani]

Thank you but the above code from my last post has actually been working well for me.

My code looks as so:

// DOMNodeInserted DOMNodeRemoved have been deprecated!
/*
jquery_element.on('DOMNodeInserted DOMNodeRemoved', function() {
    function_name();
});
 */

const observer = new MutationObserver(function_name);
observer.observe(element, { subtree: true, childList: true });