...

View Full Version : Resolved [SOLVED] After adding elements to a page, how can I "remove all"?



kberry
07-29-2011, 01:29 AM
Hi,

The following code adds an element to a page when a new address is inputted. Is there a way to remove all added elements with a Clear All button? I have a "Clear All" button with id="ClearAddresses" but I don't know how to remove all created elements - the code here only removes one at a time, since the element is created when the "Search" button is clicked.



var Dom = {
get: function(el)
{
if (typeof el === 'string')
return document.getElementById(el);
else
return el;
},
add: function(el, dest)
{
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el)
{
var el = this.get(el);
el.parentNode.removeChild(el);
}
};

var Event = {
add: function()
{
if (window.addEventListener)
{
return function(el, type, fn)
{
Dom.get(el).addEventListener(type, fn, false);
};
}
else if (window.attachEvent)
{
return function(el, type, fn)
{
var f = function()
{
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};

Event.add(window, 'load', function(){
var i = 0;
Event.add('addressSearch', 'click', function()
{
//This is a hack way of doing things...thanks asyncronous callbacks... /sarcasm
add_visited_address();
});
});

var visited_address_array = Array();
var address_check=0;
var MAX_ADDRESS_CHECKS=50;

function in_visited_address_array(new_entry)
{
for(var i=0; i<visited_address_array.length; i++)
{
if(new_entry == visited_address_array[i])
return true;
}
//otherwise...
return false;
}

function add_visited_address()
{
if(addressSearchAddress !=null)
{
var el = document.createElement('span');
var el_remove = document.createElement('span');
var new_entry = addressSearchAddress + ' : [' + addressSearchRadius + ']';
var new_address = addressSearchAddress;
var new_radius = addressSearchRadius;
el.innerHTML = '<span class=\"address-text\">' + new_entry + '</span><br>';
el_remove.innerHTML = "<a onMouseOver=\"rollover('address_remove')\" onMouseOut=\"rollout('address_remove')\" style='cursor:pointer;'>" +
"<img src=\"images/tabs-icons/normal-address_remove.png\" name='address_remove' title='remove' alt='remove'></a>&nbsp;";
if(!in_visited_address_array(new_entry))
{
visited_address_array.push(new_entry);
Dom.add(el_remove, 'AddressesVisited');
Dom.add(el, 'AddressesVisited');
Event.add(el, 'click', function(e)
{
document.getElementById('address').value = new_address;
document.getElementById('radius').value = new_radius;
ClickGeocode();
});
Event.add(el_remove, 'click', function(e)
{
Dom.remove(el);
Dom.remove(this);
});

address_check=0;
}
else if(visited_address_array[visited_address_array.length-1] == new_entry && address_check<MAX_ADDRESS_CHECKS)
{
setTimeout("add_visited_address();", 100);
address_check++;
}
}
else
setTimeout("add_visited_address();", 50);
}

Logic Ali
07-29-2011, 02:55 AM
Maintain an array of references to all the created elements.

To remove all added elements, loop through the array and for each reference:


Call its parentNode.removeChild method
Set it to null
Splice it out of the array

If you wrote the existing code, you'll know how to implement the above.

kberry
07-29-2011, 10:42 AM
Thanks! That did the trick. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum