Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    80
    Thanks
    13
    Thanked 0 Times in 0 Posts

    [SOLVED] After adding elements to a page, how can I "remove all"?

    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.

    Code:
    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);
    }
    Last edited by kberry; 07-29-2011 at 01:26 PM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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.

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    80
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thanks! That did the trick.
    Last edited by kberry; 07-29-2011 at 01:25 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •