如何使用javascript隐藏子元素

Question

<div id="wpq2">
   <div class="subClass">
   <a id="linkTO" class="subClass">New Item</a>
   or
   <a class="subClass">edit</a>
   this list
   </div>
</div>

我想隐藏所有的东西，除了

   <a id="linkTO" class="subClass">New Item</a>

我无法访问 html ，我必须使用 javascript

我试过了

var parentID = document.getElementById('wpq2');
var sub = parentID.getElementsByClassName('subClass');
var lastChild = sub[0].lastChild;
lastChild.style.display = 'none';

使用javascript不知道该怎么做

请建议

Answer 1

试试这个：

var parentID = document.getElementById('wpq2');
//get the first inner DIV which contains all the a elements
var innerDiv = parentID.getElementsByClassName('subClass')[0];
//get all the a elements
var subs = innerDiv.getElementsByClassName('subClass');

//This will hide all matching elements except the first one
for(var i = 1; i < subs.length; i++){
   var a = subs[i];
   a.style.display = 'none';
}

这是一个工作示例

编辑：以上只会隐藏 a 元素，因为您的文本元素不包含在特定元素中，那么它会变得更加棘手。如果您乐于有效地“删除”您不想要的 HTML，那么您可以执行以下操作：

var parentID = document.getElementById('wpq2');
//get the first inner DIV which contains all the a elements
var innerDiv = parentID.getElementsByClassName('subClass')[0];
//get the HTML for the a element to keep
var a = innerDiv.getElementsByClassName('subClass')[0].outerHTML;
//replace the HTML contents of the inner DIV with the element to keep
innerDiv.innerHTML = a;

这是一个例子