Как удалить весь элемент li, содержащий selectbox, используя JQuery?

Question

Я пытаюсь удалить свой динамический selectbox, если пользователь нажмет на Delete (рядом с selectbox). Но я не могу понять, как навязать удаление.

Это мой код до сих пор:

$(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; 
}); 

}); 

Поправьте меня, если я не прав, я думаю, что это что-то вроде этого. Но я не могу понять, что положить за [item]. Можете проконсультироваться?

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

Большое спасибо.

Answer 1

Sincle Ли не имеет идентификатора, вы можете использовать перемещения:

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

или добавить класс к ссылке удалить и просто использовать:

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

Answer 2

Если ссылка на удаление содержится в том же элементе dom (т. Е. div) выбора, вы можете пересечь dom, перейдя к этому родительскому div, а затем найдя select, чтобы удалить его внутри. Сортировать по:

$("a.delete").click(function(){ 
    $(this).parents("div").find("select#fruit").remove(); 
}); 

Если удаление ссылка является DOM правопреемником выбора можно использовать .prev():

$("a.delete").click(function(){ 
    $(this).prev("select#fruit").remove(); 
}); 

Answer 3

не может ответить на ваш вопрос, но угадывая разметку, как

<li> 
    <select> 
     <option>as 
     </option> 
    </select> 
    <a href="#">Delete Row</a> 
</li> 

Вы можете попробовать

$("a[href='#']:contains('Delete Row')").click(function(){ 

$(this).prev('select').remove(); 
    $(this).fadeOut('slow'); 

}); 

смотрите здесь http://jsfiddle.net/nsJF5/

вы можете посмотреть here, чтобы посмотреть, как работает prev.

Answer 4

Если у вас есть ссылка на элемент, вы можете удалить его из DOM с помощью:

element.parentNode.removeChild(element); 

Там, скорее всего, более короткая версия JQuery, если вы хотите меньше печатать.

Answer 5

Родительский элемент связи является ли, так удалите родителя при нажатии на ссылку:

$("#addmore_row").append('<li>' + 
    '<select name="fruit[]" id="fruit">' + 
    '<option value="">Select Fruit:</option>' + 
    '</select>' + '<a href="#" id="del_'+id+'"' + 
    'onclick="$(this).parent().remove(); return false;">Delete Row</a>' + 
    '</li>');