remove element created by javascript on load

Question

How can I remove elements which are created by javascript, I tried using css by setting display:none; but that doesn't seem to solve my problem, also I can't remove them since I don't have them in HTML, any other ways ? thank you

UPDATE :

Can't use any javascript such as jquery, mootools, extjs etc, and actual elements I want to remove are divs, with specified class so I can't use getElementById.

I found this script on google, but it doesn't seem to work but this is what I need :

HERE

Answer 1

This is fairly simple to do this using jQuery.

$("#myId").remove();

will remove

<div id="myId"></div>

Edit: You can also do it with "old school" javascript.

The function you're looking for is removeChild()

Example:

function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}

Answer 2

Use:

document.removeChild('id_of_element');

Answer 3

You will probably have to be more specific.

The general answer is 'with Javascript'. As long as you have a way of navigating to the element through the DOM, you can then remove it from the DOM.

It's much easier if you can use a library like jQuery or prototype, but anything you can do with these you can do with Javascript.

marcgg has assumed that you know the ID of the element: if you don't but can trace it in the DOM structure, you can do something like this (in prototype - don't know jQuery)

var css_selector = 'table#fred tr td span.mydata';

$$(css).invoke('remove');

If you can't use a JS library, you'll have to do the navigation through the DOM yourself, using Element.getElementsByTagName() a lot.

Now you've specified your question a bit: use Element.getElementsByTagName, and loop through them looking at their className property.

Answer 4

You will want something like this to take advantage of browser support where you can:

if(document.getElementsByClassName){
 // Safari 3+ and Firefox 3+
 var itms = document.getElementsByClassName('your_class');
 for(var i = 0; i<itms.length; i++){
  var it = itms[i];
  if(it.tagName == "DIV"){
   it.parentNode.removeChild(it);
   i = i - 1; //It actually gets removed from the array, so we need to drop our count
  }

 }
} else {
 // All other browsers
 var itms = document.getElementsByTagName('div');
 for(var i = 0; i<itms.length; i++){
  var it = itms[i];
                              // Test that className contains your class
  if(/your_class/.test(it.className)) it.parentNode.removeChild(it);
 }
}

Answer 5

JavaScript handles all memory mangement for you using garbage collection so once all references to an object cease to exist that object will be handled by the browsers specific implementation.

If you have the dom element itself:

if(node && node.parentNode){
    // return a ref to the removed child
    node.parentNode.removeChild(node);
}

Answer 6

Since you say you can't use Javascript, you're pretty stuck. Have you tried this CSS:

.classname {
  display: none !important;
}

It's possible that the created elements have inline styles set on them, in which case normal CSS is overridden. I believe the !important will override inline styles.

Of course, the best solution is not to add the element in the first place... but I'm guessing you're in one of those (unfathomably common) scenarios where you can't change or get rid of the JS?

Answer 7

Not all browsers have a document.getElementsByClassName method, but for your purpose you can fake it well enough- This method does not work like the native HTMLElement.getElementsByClassName- it returns an array, not a live nodelist. You can specify a parent element and a tag name to speed it up.

function getElementsByClass(css, pa, tag){
    pa= pa || document.body;
    tag= tag || '*';
    css= RegExp('\\b'+css+'\\b');
    var A= [], elements, L, i= 0, tem;
    elements= pa.getElementsByTagName(tag);
    L= elements.length;
    while(i<L){
     tem= elements[i++];
     if(css.test(tem.className)) A[A.length]= tem;
    }
    return A;
}

// test

var A= getElementsByClass('removeClass'), who;
while(A.length){
    who= A.pop(); // remove from the end first, in case nested items also have the class
    if(who.parentNode) who.parentNode.removeChild(who);
    who= null;
}

If you have assigned event handlers to the elements being removed, you should remove the handlers before the elements.