How do I remove a html element through javascript/jquery before it is displayed

Question

I'm writing a chrome extension intended to hide videos from specified channels on youtube.

The solution I'm using right now looks like this:

var previousRendererAmount = 0;
window.setInterval( function() {
  var currentRendererAmount = $(removableRendererNameString).length;
  // Check if renderer amount har changed since last time (If not, we don't need to run the removal script.)
  if( currentRendererAmount != previousRendererAmount) {
    previousRendererAmount = currentRendererAmount;
    removeVideos();
  }
}, 20);

Simply put it's run at intervals of 20 milliseconds and does a check to see if video thumbnails shown has changed. If it has it runs the removal script.

But what I really want to do is to remove them before they are displayed. Something like an event handler triggered when the DOM element(and it's children) is created. Is this possible?

qwermike · Accepted Answer · 2018-02-11 11:03:43Z

1

Yes, it is possible. You can use MutationObserver to add callback, when some DOM element changes. Check this page with example: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

In my example you can see that code within callback is executed before new element is added. That means you can delete unwanted elements before they are displayed.

let btn = document.getElementById('btn');
let videos = document.getElementById('videos');
let nodeToAdd = document.createElement('div');
nodeToAdd.innerText = 'Video 3';

btn.addEventListener('click', function() {
  videos.appendChild(nodeToAdd);
  btn.parentNode.removeChild(btn);
});

let observer = new MutationObserver(
function(mutationsList) {
  for(let mutation of mutationsList) {
    if (mutation.type == 'childList') {
      alert('Hey, this msg is displayed first');
    }
  }
});

observer.observe(videos, {childList: true});

<div id='videos'>
  <div>Video 1</div>
  <div>Video 2</div>
</div>

<button id='btn'>Add Video 3</button>

edited Feb 11, 2018 at 11:03

answered Feb 11, 2018 at 10:14

qwermike

1,4962 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KaniJonas Over a year ago

Thanks! It works really well. The only thing still is that the first elements that appear on load flashes quickly. Probably because I don't call the .observe early enough. Problem is I need an element to call it on (body for example). So I have to make sure body is created before I call it.

Collectives™ on Stack Overflow

How do I remove a html element through javascript/jquery before it is displayed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related