Question

I am trying to delete my dynamic selectbox if user choose to click on Delete (next to the selectbox). But I can’t figure out how to impose the delete.

This is my code so far:

$(function() {
// set the array
var fruit = new Array("Apple", "Orange", "Pear", "Banana");
var id = 0;

function addFruit() {
    $.each(fruit, function(key, value) {   
        $('#fruit')
        .append($('<option>', { value : key })
        .text(value)); 
    });
}

var i = $("li").size() + 1;
$("a#addmore").click(function() {
$("#addmore_row").append('<li>' +
'<select name="fruit[]" id="fruit_'+ id +'">' +
'<option value="">Select Fruit:</option>' +
'</select>' + '<a href="#" id="del_'+id+'">Delete Row</a>' +
'</li>');
addFruit();
id++;
return false;
});

});

Correct me if I am wrong, I think it’s something like this. But I can’t figure out what to put for [item]. Can please advise?

$([item]).click(function() {
$([item]).remove();
return false;
});

Thank you very much.

Answer 1

Sincle li has no id you can use traversing:

$('#del_'+id).click(function(event){
 $(this).parent().remove();
 event.preventDefault();
})

or add class to the remove link and just use:

$('.buttonToRemoveRowClass').click(function(event){
 $(this).parent().remove();
 event.preventDefault()
})