javascript 删除 li 而不删除 ul？
[英]javascript remove li without removing ul?
问题描述
有没有办法在不删除 ul 的情况下删除 ul 的 li 元素？ 我似乎只能找到这个。
var element = document.getElementById('myList');
element.parentNode.removeChild(element);
但是，这会删除 ul。 我希望能够即时删除 append li 元素，而不必在每次删除 li 元素时都创建 ul 元素。 只是在寻找一种更简单的方法。 谢谢你的帮助。
<div id="listView">
<ul id="myList" class="myList-class">
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
7 个解决方案
解决方案1
25 已采纳 2013-09-13 20:54:08
你可以做这样的事情。
var myList = document.getElementById('myList');
myList.innerHTML = '';
如果您使用 jQuery
$('#myList').empty();
这两个都将删除列表中的所有内容。
解决方案2
15 2013-09-13 21:00:13
这应该可以解决问题：
var lis = document.querySelectorAll('#myList li');
for(var i=0; li=lis[i]; i++) {
li.parentNode.removeChild(li);
}
解决方案3
8 2013-09-13 21:07:00
删除ul的原因是因为您有指向ul的element变量。 然后，您的下一行代码向上移动到父级 ( #listView ) 并应用removechild方法，并将element变量（指向ul元素）传递给它。
如果您需要删除所有 li 元素，则可以使用：
document.getElementById('myList').innerHTML = '';
这将完全清空ul 。 如果您需要删除选定的li元素，则可以使用以下内容从#myList遍历到特定的子元素：
var ulElem = document.getElementById('myList');
ulElem.removeChild(ulElem.childNodes[i])
其中i是要删除的li的索引（第 1 个为 0，第 2 个为 1，依此类推）
供参考： https : //developer.mozilla.org/en-US/docs/Web/API/Node.removeChild
解决方案4
1 2021-03-18 23:05:24
const li = document.querySelectorAll(".list-item-class");
for(let i = 0; i <= li.length; i++ ){
l = li[i];
l.remove();
}
解决方案5
0 2017-11-30 12:26:37
只要我们有第一个孩子 - 删除它。 （只要我们有一个成员）。
const removeNodesFromList = () => {
const nodes = document.querySelector('.ul-class-selector');
while (nodes.firstChild) {
nodes.removeChild(nodes.firstChild);
}
};
解决方案6
0 2021-10-05 10:29:04
let ol = document.querySelector("ol"); function addItem() { let lastIndex = ol.childElementCount; let li = document.createElement("li"); li.dataset.index = lastIndex; let a = document.createElement("a"); a.href = "#"; a.innerHTML = " Remove"; a.addEventListener("click", function(e) { e.preventDefault(); let index = e.target.parentNode.dataset.index; removeItem(parseInt(index)); }) li.appendChild(a); ol.appendChild(li); } function removeItem(i) { let li = ol.children[parseInt(i)]; ol.removeChild(li); for (let j = i; j < ol.childElementCount; j++) { let li = ol.children[j]; li.dataset.index = j; } } addItem();
<ol> </ol> <button onclick="addItem()">Add</button>
解决方案7
0 2021-11-19 03:42:11
我解决这个问题的方法是这样的。 我在创建功能中创建了删除功能：
HTML
<body>
<div class="myclass">
<h1>TODO App</h1>
<!-- user input -->
<input class="user_input" type="mytext" name="mytext" placeholder="Enter text">
<button class="mybutton">Add</button>
</div>
<div>
<ul class="ul-container"></ul>
</div>
</body>
JavaScript
function creation() {
const userInput = document.querySelector(".user_input").value;
const ulContianer = document.querySelector(".ul-container");
console.log(userInput);
if (userInput !== "") {
let li = document.createElement("li");
let test = document.createTextNode(userInput);
li.append(test);
li.addEventListener('click', function (e) {
li.parentNode.removeChild(li);
})
ulContianer.appendChild(li);
document.querySelector(".user_input").value = "";
}
}
所以在你创建它之后。 单击 li 元素后，它就会消失。
解决方案8
-1 2021-12-18 14:43:00
const ulist = document.querySelector('#myList')
function clear(myList)
{ ulist.innerHTML = " "}
clear(ulist);
如何使用 vanilla JavaScript 在 Ul li 上设置和删除类？
[英]How to have default and remove class on Ul li using vanilla JavaScript?
如何使用javascript在html中删除和创建新的ul li标签
[英]how to remove and create new ul li tag in html using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.