Prevent specific HTML elements from being created

Question

Imagine this: I know that an element with id="cats" will be created sometime, but I don't know when.

I can remove an element that already exists like this:

document.getElementById('cats').style.display = 'none';

But is there any way to block that element before it even exists, so it can never be created? Or detect and delete it immediately after it has been created? (pure JavaScript answers have advantage)

Important note: I can't edit CSS

Javascript and jQuery both have ways of removing elements but I don't think you can stop it from being created. — NendoTaka, May 16 '15 at 15:35
To improve my skills, I'm trying to make my own version of AdBlock. And it removes some ads, but there are some websites(usually illegal movie streaming ones) that will display ads after user interaction, like clicking on something. I'd like to stop that. — Test Account, May 16 '15 at 15:43
As in the answer below, you will likely want to use a timer. In the near future (and available in some Firefox and Chrome dev builds as well as via Polyfill) `dom mutation observers` will be the best solution. Also forthcoming are `Object.watch` and `Object.observe`. Look on http://mdn.com for more details. — dgo, May 16 '15 at 15:56

score 5 · Answer 1 · answered May 16 '15 at 15:37

5

Instead of blocking the element being created, why not simple hide it in your css?

#cats { display:none }

answered May 16 '15 at 15:37

Hugo W.

84
4

This is hillariously - almost certainly - the best possible answer. – dgo May 16 '15 at 15:57
1

the best possible answer? he wrote in the question " I can't edit CSS "! also display:none maybe a good solution for this specific case but you have to realize that "google crawler" sees it for that it is, so hiding an element is a big no-no SEO wise. check this video by the spam team over at google for more info about the consequences of display:none [video](https://youtu.be/7y-m_jiayLQ) – doubleorseven Nov 02 '16 at 15:38

score 0 · Answer 2 · edited May 23 '17 at 11:58

If you want to have a javascript only solution, you could do two things:

Find a way to watch for DOM manipulations. This is not easily be done cross browser. There is a post about it here: Detect changes in the DOM
Run an interval every seconds (or so) and check for the ID, then it can quickly be deleted, after it has been created. Keep in mind, that this is a lot of overhead.

(function() {
  window.setInterval(function() {
    var elem = document.getElementById('cats');
    if (elem) {
      elem.parentNode.removeChild(elem);
    }
  }, 1000)
}());

(function () {
  button = document.getElementById('creator');
  button.addEventListener('click', function () {
    var element = document.createElement('div');
    element.id = 'cats'
    document.body.appendChild(element);
  })
}());

#cats {
  background: red;
  width: 100px;
  height: 100px;
}

<button id="creator">Create Element</button>

Usually you should be able to control who or what manipulates the DOM, and thus be able to avoid the creation in the first place.

score 0 · Answer 3 · answered May 16 '15 at 16:13

Combine Hugos display: none;-solution with a check if the id is already in use (and if so, remove it from the DOM) when you are going to introduce your element with that id. The css rule will not prevent the creation of an element with that id within your DOM, so there is still the chance that an element with this id could be created before you are getting to action.

Prevent specific HTML elements from being created

3 Answers3