Mike Blamires

Today I have started sewing my JQuery hat for a project at work. It really does take all the pane out of working with and manipulating the DOM in some very fancy ways, especially when it comes to cross browser compatibility.

There seem to be a few nuances within it but by enlarge it is comprehensive, very simple to use and very extensible. The one that did take a little getting around was appending to and removing the parent element. For example, I want to dynamically add to add divs to the page and when you hover over the items a 'remove' button appears, until you move off which lets you remove the item from the list.

So I have the following snippet to run when the DOM is complete:

  $(document).ready(
  	function () {
  		$('.element1').hover(
  			function () {
  				$(this).addClass('hover');
  				$(this).append('<p class='removeButtonP'><input type='button' value='x' class='removeButton' id='removeButton'&gt</p>');
  				$('.removeButton').click(
  					function () {
                                                //this event needs to remove the div (.element1) 
  					}
  				)
  			},
  			function () {
  				$('.removeButtonP').remove('p');
  				$(this).removeClass('hover');
			}
  		) 		
  	}
  )	

I would expect the DOM (very representative!) to look like this after we had moved over the first of three divs:

document
 |
 |-html
     |
     |-head
     |-body
         |
         |-[0] div className='element1'
         |-[1] div className='element1'
         |-[2] div className='element1'
             |
             |- p
                 |
                 |- input type='button'

so when the click(function) is called $(this.parent) should refer to element1 but it doesn't, p.parentNode is null so the DOM isn't laid out as you would expect.

To combat this i have modified the code to the below to add a dynamically created id to the div you are hovered over and places this id also in the click() function parameter. The code is commented so I won't go over it here.

 
  $(document).ready(
  	function () {
  		$('.element1').hover(
  			function () {
  				//create a random 'GUID' value
  				var guid = generateGuid();
  				//when we add our remove button as we hover over
  				//we also set the id of the element we are accessing  
  				$(this)[0].id = guid; 
  				$(this).addClass('hover');
  				$(this).append('<p class='removeButtonP'><input type='button' value='x' class='removeButton' id='removeButton'></p>');
  				$('.removeButton').click(
  					function () {
  						//remove the specific element we are hovered over.
  						//remember: as this is nested in .click(function)
  						//$(this) refers to the input element withe the
  						//class .removeButton   											$('#'+guid).remove('div');
  					}
  				)
  			},
  			function () {
  				$('.removeButtonP').remove('p');
  				$(this).removeClass('hover');
			}
  		) 		
  	}
  )	  
  
  
  // with thanks to http://blog.shkedy.com/ for the handy function
  function generateGuid() {
	var result, i, j;
	result = '';
	for(j=0; j<32; j++) {
		if( j == 8 || j == 12|| j == 16|| j == 20)
			result = result + '-';
		i = Math.floor(Math.random()*16).toString(16).toUpperCase();
		result = result + i;
	}
	return result
  }