从ul中删除li元素

Question

在JavaScript中，是否可以动态删除ul中的某些li元素，且根据这些li元素的id进行选择？

有关实际问题的更新：

我有以下列表。

<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请求/响应之后，如果特定属性为“undefined”，我希望将其从列表中删除。

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

我已经确保我收到了正确的ajax响应。所以，现在的问题是，当我删除attrib4时，attrib [1-3] 也被删除了。有任何想法为什么会发生这种情况吗？

- Ashwin

---

我尝试过$("#id-of-the-li-element").remove()，它会删除列表中的所有li元素。 - Ashwin

如果您将li的实际id作为jquery选择器，它将不会删除所有的lis。请包含您尝试过的代码示例。 - Josh Mein

所以你正在使用jQuery？你看过文档了吗？无论如何，那段代码只应该删除一个元素。你是否在重复使用ID？那个ID是在UL上而不是LI上吗？ - user1106925

@Ashwin，这实际上是你可以使用jQuery完成的方式。http://jsfiddle.net/eCbGf/ 你的错误在其他地方。 - Alex Wayne

这里提供的信息不足以被使用。完成一份基本的jQuery教程，你就会知道如何做了。 - user1106925

当实际元素名为“attrib04”时，为什么要删除“attrib4”？ - clockw0rk

Answer 1

请尝试

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

- waldyr.ar

Answer 2

如果您获取了元素并找到了其父级，则可以按照以下步骤从父级中删除该元素：

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

必须通过父级进行操作，这是不可避免的。

- Jon Taylor

Answer 3

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

这是一个基于你的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();
        }            
    });
});​

只针对单个元素 (演示) 进行定位并移除，也是可能的，方法如下：

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

在处理ID时一定要小心，它们必须完全匹配。attrib04 != attrib4

- nbrooks

Answer 4

这将使 li 元素不可见：

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

免责声明：它们仍将在DOM中。

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

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

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

- Alex W