Question

考虑到li元素的id，是否可以使用JavaScript动态删除ul中的几个li元素？

更新实际问题：

我有以下列表。

<ul id="attributes" data-role="listview">
    <li id="attrib01">Attribute1</li>
    <li id="attrib02">Attribute2</li>
    <li id="attrib03">Attribute3</li>
    <li id="attrib04">Attribute4</li>
    <li id="attrib05">Attribute5</li>
</ul>

在ajax请求/响应之后，如果某个特定属性是＆＃34;未定义＆＃34;，我想将其从列表中删除。

if(typeof data.attrib1 === "undefined")
    $("#attrib01").remove();

我已经确定我收到了正确的ajax响应。所以，现在的问题是，当我删除attrib4时，attrib [1-3]也被删除了。知道为什么会这样吗？

Answer 1

尝试

var elem = document.getElementById('id');
elem.parentNode.removeChild(elem);

Answer 2

如果你得到了元素，那么找到它的父元素然后删除元素。来自父母如下：

element = document.getElementById("element-id");
element.parentNode.removeChild(element);

有必要通过父母，所以这是不可避免的。

Answer 3

$('#id').remove()是删除单个元素的正确方法。请注意，元素ID在html中必须是唯一的，并且该调用必须包装在DOM就绪函数中。

This is a working example基于您的HTML。它遍历所有列表项并删除数据对象中不存在id的那个：

var data = {
    attrib01: "Number 1",
    attrib02: "Number 2",
    attrib04: "Number 4"
};

$(document).ready(function() {
    $("ul > li").each(function() {
        alert(this.id in data); //check if value is defined
        if(!(this.id in data)) {
            $(this).remove();
            // This also works:
            //$('#'+this.id).remove();
        }            
    });
});

只需执行以下操作，即可定位和删除单个元素（Demo）：

$(document).ready(function() {
    $("#attrib04").remove();
});

小心你的身份证 - 他们必须完全匹配。 attrib04 != attrib4

Answer 4

这会使li元素不可见：

document.getElementById("id_here").style.visibility = "hidden";

免责声明：他们仍将在DOM中

要从DOM中删除元素，请使用JQuery的.remove()方法：

$("#id_here").remove();

http://api.jquery.com/remove/

从ul中删除li元素

4 个答案: