我正在尝试创建一个下拉列表,为 SQL 报告创建器动态创建 div。
当选择一个选项时,它会创建一个具有该选项名称的 div 并将其正确附加到 div 中。我的问题是我不想要重复的 div。因此,如果已经创建了ID和文本为“Successful”的div,我不想添加它,我想先删除旧的,然后添加它。就目前而言,唯一不起作用的部分是:
$("div").remove(divcnt);
这不会删除与所选 div 具有相同 ID 的 div。
有什么建议吗?
fiddle : https://jsfiddle.net/gmggq67o/
$('#rp_status').on('change', function() {
var divcnt = $(this).val();
if (divcnt === 'All') {
$("div").remove('.sselection');
var $div = $("<div></div>", {
id: "sall",
class: "sselection status",
text: divcnt
});
$("#status_selections").append($div);
} else {
$("div").remove(divcnt);
$("div").remove("#sall");
var $div = $("<div></div>", {
id: divcnt,
class: "sselection status",
text: divcnt
});
$("#status_selections").append($div);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rp_item">
<div class="rp_item_hdr">Status</div>
<div class="rp_item_cnt">
<select name="status" id="rp_status">
<option selected disabled hidden style='display: none' value=''></option>
<option>All</option>
<option>New</option>
<option>In Progress</option>
<option>Successful</option>
<option>On Hold</option>
<option>Failed</option>
</select>
</div>
<div class="report_selections" id="status_selections">
<h5>Selections</h5>
<div id="sall" class="sselection status">All</div>
</div>
</div>
最佳答案
您的代码尝试查找具有给定名称的标签。要通过 id
属性进行选择,您需要添加哈希前缀:
$("div").remove("#" + divcnt);
但请注意,当 divcnt
有空格时,这不起作用,因为 HTML id 属性不允许有空格,并且选择器将以不同的方式解释。因此,请改用自定义属性,或使用 [ ]
选择器语法:
$("div").remove('[id="' + divcnt + '"]');
关于jquery - 如何删除仅包含特定文本的动态 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45175069/