Question

如果用户选择单击“删除”（选择框旁边），我将尝试删除动态选择框。但我无法弄清楚如何强加删除。

到目前为止，这是我的代码：

$(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]).click(function() {
$([item]).remove();
return false;
});

非常感谢。

Answer 1

可能无法回答您的问题，但可以将您的标记猜测为

<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 2

Sincle li没有你可以使用遍历的id：

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

或将类添加到删除链接，只需使用：

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

Answer 3

如果您的删除链接包含在选择的同一个dom元素（即div）中，您可以通过上升到此父div来遍历dom，然后找到select以移除内部它。排序：

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

如果删除链接是选择的DOM后继者，则可以使用.prev()：

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

Answer 4

如果您有对元素的引用，可以使用以下命令将其从DOM中删除：

element.parentNode.removeChild(element);

如果你想减少打字，可能会有更短的jQuery版本。

Answer 5

链接的父元素是li，因此在单击链接时删除父元素：

$("#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>');

如何使用Jquery删除包含选择框的整个li元素？

5 个答案: