Javascript 从 ul 中删除 li 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11751111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing li elements from ul
提问by Ashwin
Is it possible using JavaScript to dynamically remove just a few li elements from a ul, given the id's of the li elements?
给定 li 元素的 id，是否可以使用 JavaScript 从 ul 中动态删除几个 li 元素？
UPDATE about the actual issue:
关于实际问题的更新：
I've the following list.
我有以下清单。
<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>
After a ajax request/response, if a particular attribute is "undefined", I want to remove it from the list.
在 ajax 请求/响应之后，如果某个特定属性是“未定义”，我想将其从列表中删除。
if(typeof data.attrib1 === "undefined")
$("#attrib01").remove();
I've made sure I'm receiving the correct ajax response. So, the problem now is, that when I remove attrib4, attrib[1-3] are being removed as well. Any idea why this might be happening?
我已经确定我收到了正确的 ajax 响应。所以，现在的问题是，当我删除 attrib4 时，attrib[1-3] 也被删除了。知道为什么会发生这种情况吗？
回答by waldyr.ar
Try
尝试
var elem = document.getElementById('id');
elem.parentNode.removeChild(elem);
回答by Jon Taylor
If you get the element then find its parent then remove the element. from the parent as follows:
如果您获得该元素，则找到它的父元素，然后删除该元素。来自父级如下：
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
It is necessary to go through the parent so this is unavoidable.
有必要通过父母，所以这是不可避免的。
回答by nbrooks
$('#id').remove()is the correct way to remove a single element. Note that element IDs must be unique in html, and that invocation must be wrapped in a DOM ready function.
$('#id').remove()是删除单个元素的正确方法。请注意，元素 ID 在 html 中必须是唯一的，并且该调用必须包含在 DOM 就绪函数中。
This is a working examplebased on your html. It loops through all the list-items and removes the one whose id is not present in the data object:
这是一个基于您的 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();
}
});
});?
It is also possible to target and remove only a single element (Demo) by simply doing:
也可以通过简单地执行以下操作来仅定位和删除单个元素（Demo）：
$(document).ready(function() {
$("#attrib04").remove();
});?
Be careful with your IDs -- they must match exactly. attrib04 != attrib4
小心您的 ID - 它们必须完全匹配。 attrib04 != attrib4
回答by Alex W
This will make the lielements invisible:
这将使li元素不可见：
document.getElementById("id_here").style.visibility = "hidden";
Disclaimer: they will still be in the DOM
免责声明：它们仍将在 DOM 中
To remove elements from the DOM use JQuery's .remove()method:
要从 DOM 中删除元素，请使用 JQuery 的.remove()方法：
$("#id_here").remove();
