asked on

jQuery Remove appended div

I have a jQuery Function that appends an overlay div and a div that has a message in it. In the message div there is a button to click to close the overlay. if a value is entered into a form that is no numeric. Everything works fine. However, I am not sure how to Un-append the overlay div. Everything works fine until line number: 19

$(function () {
 $(".laser_numeric").change(function(e) {
	 var director = $("input.laser_numeric").val();
	 
	 if(director=="" || ($.isNumeric($('input.laser_numeric').val()))){
		 return true;
	 	} else {
	 	      e.preventDefault();
	 	      $('body').append(
	 	        $('<div/>')
	 	        .addClass('overlay')
	 	        .height(
	 	          $(document).height()
	 	        )
	 	      );
	 	      $('#numeric_values').fadeIn();
	 		return false;
		}
	 	$('#close-dialog').click(function() {
	 		$('.overlay').removeClass('overlay');
	 		$('#numeric_values').fadeOut();
	 	});
	});
});

Open in new window

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Robert Granlund

ASKER

neither worked

$(function () {
 $(".laser_numeric").change(function(e) {
	 var director = $("input.laser_numeric").val();
	 
	 if(director=="" || ($.isNumeric($('input.laser_numeric').val()))){
		 return true;
	 	} else {
	 	      e.preventDefault();
	 	      $('body').append(
	 	        $('<div/>')
	 	        .addClass('overlay')
	 	        .height(
	 	          $(document).height()
	 	        )
	 	      );
	 	      $('#numeric_values').fadeIn();
	 		return false;
		}
	 	$('#close-dialog').click(function() {
	 		$('body').remove('.overlay');
	 		$('#numeric_values').fadeOut();
	 	});
	});
});

Open in new window

Tom Beck

Have a look at this jsfiddle example. I made a couple of changes to your snippet.