Issue while trying to remove a div was created by .append()
Hi
I have a drop down menu and the menu have numbers from 1 - 24
by default i have 1 div created and when the use change the menu i add divs acordanly. so if i user selected number 5 from the menu i will append 4 new divs which is total of 5 including the default.
But When then used go from 5 to 3 i will have to remove the last 2 div that we generated by .append()
i have used .live().remove() to do that but it is not working.
when i say it is not working i mean the remove function does not remove divs but the append() works perfectly.
$("#countChecks").change( function() {
var inUseTotalCheck = Number( $('#inUseTotalCheck').val() );
var inUseLastCheck = Number( $('#inUseLastCheck').val() );
var totalToUse = Number( $(this).val() );
if( totalToUse > 1 ){
$('#inUseTotalCheck').val( totalToUse );
$('#inUseLastCheck').val( totalToUse )
if( totalToUse > inUseTotalCheck){
//append fields
for(var i = inUseTotalCheck+1; i <= totalToUse; ++i){
$('#checkListPanel').append(
'<div class="label-input" id="check_' + i + '">' +
'<input type="text" id="checknumber_' + i + '" name="checknum[]" value="" style="width: 120px;" placeholder="Check number..." />' +
'<input type="text" id="amount_' + i + '" name="amount[]" value="" style="width: 120px;" placeholder="Check amount..." />' +
'<input type="text" id="checkDate_' + i +'" name="checkDate[]" value="" style="width: 120px;" readonly="true" /> ' +
'</div>'
);
}
} else {
//remove fields
for(var i = inUseTotalCheck; i >= totalToUse; --i){
$('#checkListPanel').live().remove(
'<div class="label-input" id="check_' + i + '">' +
'<input type="text" id="checknumber_' + i + '" name="checknum[]" value="" style="width: 120px;" placeholder="Check number..." />' +
'<input type="text" id="amount_' + i + '" name="amount[]" value="" style="width: 120px;" placeholder="Check amount..." />' +
'<input type="text" id="checkDate_' + i +'" name="checkDate[]" value="" style="width: 120px;" readonly="true" /> ' +
'</div>'
);
}
}
}
});