PDA

View Full Version : [DHTML] Removing parts from the DOM using classes



molendijk
01-06-2008, 10:38 PM
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
01-07-2008, 12:54 AM
The script contained a serious error. I corrected it. Please re-download if you downloaded before January 7th.

Arie Molendijk.

Trinithis
01-07-2008, 05:15 AM
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
01-07-2008, 08:12 AM
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
01-07-2008, 10:47 AM
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
01-07-2008, 11:46 AM
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
01-07-2008, 12:31 PM
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
01-07-2008, 01:13 PM
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
01-07-2008, 05:02 PM
Hmm? It works fine here. Demo page?

molendijk
01-07-2008, 07:12 PM
Twey, I copied my URL-TO-CODE page, and put both your and my functions in it. It's here (http://molendijk.110mb.com/RemoveFromDom/dom1.html). If you choose to click on your link first (removeFromDom), then refresh the page before clicking on my link (remove_from_dom).
Thanks,
Arie.

Twey
01-07-2008, 08:18 PM
Ah, I see, an array/collection difference. I was using an array to simulate a collection when I tested. Fixed in the code above.

molendijk
01-07-2008, 09:05 PM
I'll try it.
Thanks,
Arie.

Trinithis
01-11-2008, 04:13 AM
Perhaps the issue is that I renamed the function using js naming standards:

removeFromDom vs. remove_from_dom

(I'm not a fan of using underscores.)

molendijk
01-11-2008, 02:15 PM
Trinithis, I'm afraid that's not the issue. I adapted the function name.

Arie.