7

考虑到 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 请求/响应之后，如果特定属性是“未定义”，我想将其从列表中删除。

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

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

4

4 回答 4

21

尝试

var elem = document.getElementById('id');
elem.parentNode.removeChild(elem);
于 2012-08-01T00:51:26.033 回答
5

如果你得到元素然后找到它的父元素然后删除元素。从父母如下：

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

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

于 2012-08-01T00:51:31.200 回答
3

$('#id').remove()是删除单个元素的正确方法。请注意，元素 ID 在 html 中必须是唯一的，并且该调用必须包装在 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();
        }            
    });
});​

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

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

请注意您的 ID - 它们必须完全匹配。attrib04 != attrib4

于 2012-08-01T01:34:53.707 回答
0

这将使li元素不可见：

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

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

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

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

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

于 2012-08-01T00:51:17.980 回答