[DHTML] Removing parts from the DOM using classes

[molendijk]

1) CODE TITLE: Removing parts from the DOM using classes

2) AUTHOR NAME/NOTES: Arie Molendijk

3) DESCRIPTION: It is relatively easy to add elements to the DOM. But removing whole parts may be time-consuming if it's done with references to IDs. This script does it with classes. (If this is already known, don't read it).

4) URL TO CODE: http://molendijk.110mb.com/RemoveFromDom/dom.html

or, ATTACHED BELOW (see #3 in guidelines below):

[molendijk]

The script contained a serious error. I corrected it. Please re-download if you downloaded before January 7th.

Arie Molendijk.

[Trinithis]

A little refractoring

function removeFromDom(tag, className) {
  var els = document.getElementsByTagName(tag), n = els.length, el;
  for(var i = n - 1; i >= 0; --i)) {
    if(els[i].className == className) {
      var el = els[i];
      el.style.color = "#f00"; // I don't understand this . . .
      while(el.hasChildNodes()) 
        el.removeChild(el.firstChild);
    }
  }
}

[Twey]

A little more refactoring:

function clearByClass(tag, className) {
  for(var re = new RegExp('(?:^|\\s)' + className + '(?:$|\\s)'), el, els = document.getElementsByTagName(tag), i = els.length - 1; i >= 0 && el = els[i]; --i)
    if(re.test(el.className))
      while(el.hasChildNodes()) 
        el.removeChild(el.firstChild);
}

Here's an actual removeFromDom() function:

function removeFromDom(tag, className) {
  for(var re = new RegExp('(?:^|\\s)' + className + '(?:$|\\s)'), el, els = document.getElementsByTagName(tag), i = els.length - 1; i >= 0 && el = els[i]; --i)
    if(re.test(el.className))
      el.parentNode.removeChild(el);
}

[molendijk]

Hello Trinithis, Twey,

I tried your functions on my page, but they don't work. The ErrorConsole says that removeFromDom (or clearByClass) are not defined.

Arie.

[molendijk]

Trinithis,
This is as close as I can get to your function. It works fine and is short:

<script type="text/javascript">
var d=document //needed elsewhere
function remove_from_dom(tag,className) {
var els = document.getElementsByTagName(tag)
	for (i=0;i<els.length; i++) {
		if (els.item(i).className == className){
		while (els.item(i).firstChild)
		els.item(i).removeChild(els.item(i).firstChild);
	}
       }
      }
</script>

Arie

[Twey]

I tried your functions on my page, but they don't work. The ErrorConsole says that removeFromDom (or clearByClass) are not defined.

Then I suspect that you're doing something wrong. There was an extra bracket (now removed), but if your error console didn't report that as well then you're including the script incorrectly somehow.

This is as close as I can get to your function. It works fine and is short:

But that still doesn't remove the items with that class. It just empties them of children. That's why the dual functions in my post: one does what your function does, and the other does what it says it does.

[molendijk]

Twey, now I get 'Index or size is negative or greater than the allowed amount'.

The whole problem may be that the function is supposed to operate on tags that already exist on the page (that are not created/added).

Arie

[Twey]

Hmm? It works fine here. Demo page?

[molendijk]

Twey, I copied my URL-TO-CODE page, and put both your and my functions in it. It's here. If you choose to click on your link first (removeFromDom), then refresh the page before clicking on my link (remove_from_dom).
Thanks,
Arie.