Jquery 添加时逐个删除dropdownlist

这是一种逐个删除dropdownlist的方法吗

我使用jquery在div中使用按钮创建和附加dropdownlist，该按钮用于删除dropdownlist

要求：

可以逐个删除下拉列表

下面是一个显示问题的片段：

$（文档）.ready（函数（）{
$（“#btnAddItem”）。单击（函数（）{
var text=$（“#ddl_设备_选项”）.val（）；
如果（文本==“设备1”）{
$（'#dvTable'）。追加（''）；
$（'#dvTable'）。追加（文本）；
$（'#dvTable'）。追加（'1234567 8'）；
var i=“1”；
$（'#dvTable'）。追加（''）；
}else if（文本==“设备_2”）{
$（'#dvTable'）。追加（''）；
$（'#dvTable'）。追加（文本）；
$（'#dvTable'）。追加（'1234567 8'）；
var i=“2”；
$（'#dvTable'）。追加（''）；
}else if（文本==“设备_3”）{
$（'#dvTable'）。追加（''）；
$（'#dvTable'）。追加（文本）；
$（'#dvTable'）。追加（'1234567 8'）；
var i=“3”；
$（'#dvTable'）。追加（''）；
}
}); 
});
$（“#dvTable”）。单击（函数（）{
//警报（“点击”）；
$（this）.remove（）；//它将删除整个div
});

选择设备：
装置1
装置2
装置3
装置4
装置5
装置6
装置7
装置8
装置9
当您执行
$（“#dvTable”）。单击（）
，然后变量
这是
#dvTable
本身。您告诉脚本删除整个div。您应该做的是将select and按钮包装到另一个div中，然后执行以下操作：

$（“#dvTable按钮”）。单击（函数（）{
$（this.parent（）.remove（）；
});

或

$（“#dvTable”）。在（'click'，'button'，function（）上{
$（this.parent（）.remove（）；
});
您的代码有两个问题。第一个问题是，单击事件触发的元素错误：

$( "#dvTable" ).click(function() {
  //  alert("clicked");
  $(this).remove(); // it will remove entire div
});

这将导致任何单击
#dvTable
的操作都会删除
#dvTable
。这显然不是你想要的

但是，简单地将
单击事件添加到
#dvTable>输入[type=button]
选择器将无法正常工作。构建新元素的方式意味着动态HTML有缺陷

我已将您的HTML输出修改为：

var newElement;   
newElement = '<div>';
newElement += '<font face="Arial" size="4">&nbsp;' + text + '</font>'
newElement += '<select id="test"> <option>1</option> <option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option> <option>8</option> </select>'
var i = "1";
newElement += '<input type="button" id='+ i +' value="x" class="btn btn-danger" >';
newElement += '</div>';
$('#dvTable').append(newElement);

基本上，当您单击
#dvTable
下的
div
下的任何按钮时，它会删除父元素，即
div
。这将删除您先前添加的所有动态内容，而不仅仅是其中的一部分

请看下面的工作代码段，其中显示了这一点：


$（文档）.ready（函数（）{
$（“#btnAddItem”）。单击（函数（）{
var text=$（“#ddl_设备_选项”）.val（）；
如果（文本==“设备1”）{
var新元素；
新元素=“”；
新元素+=''+文本+''
新元素+=“1234567 8”
var i=“1”；
新元素+=''；
新元素+=''；
$（'#dvTable'）。追加（新元素）；
}
}); 
});
$（文档）。在（'click'，'#dvTable>div>select+input[type=button]”上，函数（）{
$（this.parent（）.remove（）；
});

选择设备：
装置1
装置2
装置3
装置4
装置5
装置6
装置7
装置8
装置9
您可以像下面这样使用。为下拉列表提供一个id作为“测试”

上述代码会自动删除下拉列表的最后一个选项。
您当前的操作有什么问题？为什么不起作用？@Martin现在它将删除整个div，而不是逐个删除dropdownlist。请在单击问题下方的
edit
后，使用
按钮从问题中的代码创建一个可运行的片段。现在它将删除整个div，而不是逐个删除dropdownlist，这就是你要它做的。你的代码创建了重复的ID，这是不允许的。这使得您的HTML无效<代码>id
每个文档必须是唯一的。除此之外，将要添加的元素包装在一个
div
中，这样可以删除该
div
，而不是要添加的每个元素。这将不起作用。添加的元素没有组合在一起，因此删除
父项
仍将删除
#dvTable
。我说他应该将其包装在另一个div中，因此它应该只删除select and按钮：）
$(document).on('click', '#dvTable > div > select + input[type=button]', function() {
  $(this).parent().remove();
});

$('#test').children('option:(:last)').remove();

$('#test').find('option:last-child').remove();