Add/Remove Boxes Help Requested
I am brand new to jQuery and I am sure that this is a simple, nuts-and-bolts mistake. I apologize in advance for taking people's time but I have been looking at this for about 14 hours and I think it's time to ask for help.
I have a web page with two <div>s on it and I wrote jQuery code that adds another, similar <div> when an "add" button is clicked elsewhere on the page. That works fine (including stopping and delivering an error message once a total of 6 of these <divs> are on the site.)
The problem comes when I try to remove. I can remove the two <div>s that were hard-coded into the HTML but I cannot remove any of the new <div>s that jQuery creates dynamically. That makes sense somehow but I don't know what to do about it.
So here's the code:
/* addFilter.js
adds (and removes) "filters"
*/
$(document).ready(function() {
var numberOfFilters = $('div.filterbox').size();
// add a filter when "Add Filter +" button is pressed
$('a.button-add').click(function() {
if (numberOfFilters < 6) {
$('div.filterbox:first').clone().removeAttr('id').attr('id', 'filterNumber' + 3 + '').fadeIn('slow').appendTo('#filterWrapper');
numberOfFilters = Number(++numberOfFilters);
return true;
} else {
alert('Sorry. You may use a maximum of 6 filters.');
return false;
} // END check for no more than 6 filters
});// END add function
// removes a filter when its X is clicked, so long as there is at least one such element
$('a.remove_filter').click(function() {
var thisFilter = $(this).parent().parent();
var filterId = $(thisFilter).attr('id');
if (numberOfFilters > 1) {
$(thisFilter).remove();
numberOfFilters = Number(--numberOfFilters);
//alert(numberOfFilters);
return true;
} else {
alert('Oops. You must have at least one filter. You can hide the filters by clicking "Advanced Search" again.');
return false;
}
});// END remove function
}); //(document).ready
// END addfilter.js
Thank you in advance for your suggestions.