如何用纯JavaScript隐藏/移除ul类中的文本并保留锚点？

嘿，我明白你的问题了——你要处理的是同一个ul标签下混合了锚点元素和文本节点，之前用getElementsByTagName和removeChild没效果，是因为那些方法主要针对元素节点，而你要移除的用户名是文本节点，不属于元素，所以抓不到它对吧？

下面给你两种纯JavaScript的解决方案，不需要按钮触发，页面加载后自动执行：

方法1：精准移除文本节点（适合复杂场景） #

这个方法会遍历目标ul的所有子节点，只移除非空白的文本节点，保留锚点元素，适合ul内还有其他需要保留的元素的情况：

// 确保DOM渲染完成后再执行操作
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标ul元素
  const targetList = document.querySelector('.list2');
  
  // 倒序遍历子节点（避免移除节点后索引混乱）
  for (let i = targetList.childNodes.length - 1; i >= 0; i--) {
    const node = targetList.childNodes[i];
    // 判断是否是有效文本节点（过滤换行、空格这类空白文本）
    if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== '') {
      targetList.removeChild(node);
    }
  }
});

方法2：直接重置ul内容（适合简单场景） #

如果你的list2里只有锚点和要移除的文本，这个方法更简洁：直接清空ul，再把锚点重新加回去：

document.addEventListener('DOMContentLoaded', function() {
  const targetList = document.querySelector('.list2');
  // 找到ul里的锚点元素
  const link = targetList.querySelector('a');
  // 清空ul内容，再把锚点放回
  targetList.innerHTML = '';
  targetList.appendChild(link);
});

替换后的完整代码示例 #

把你原来的<script>部分替换成上面任意一种代码即可，完整页面代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.navbar-right { width : 50%; background-color: #ededed; } 
a:active { color: red !important; } 
a:hover { color: red; } 
/* .list2 { display: none; } */ 
.list2 a { display: block !important; } 
h1 { box-shadow: 2px 2px 5px red; box-shadow: none !important; } 
</style> 
</head> 
<body> 
<title>Testing</title> 
<div class="navbar-right"> 
<h1>Testing</h1> 
<p>This is a test page</p> 
<ul class="list1"> 
<li>list element 1</li> 
<li>list element 2</li> 
<ul class="list2"> 
<a href="http://www.google.co.uk" target="_blank">click me</a> 
text 
</ul> 
</ul> 
</div> 
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  const targetList = document.querySelector('.list2');
  const link = targetList.querySelector('a');
  targetList.innerHTML = '';
  targetList.appendChild(link);
});
</script> 
</body> 
</html>

补充说明 #

你之前的方法无效，是因为你操作的是<li>元素，而要移除的文本是<ul class="list2">的直接子节点，属于文本节点（nodeType为3），不是元素节点，所以getElementsByTagName无法捕获到它，必须通过childNodes来访问这类节点。

内容的提问来源于stack exchange，提问作者Thom Rogers