如何使用 getElementsByClassName(<classname> ).outerHTML="" 隐藏一个<div>当 div 的 class 有多个名称时？</div><div id="text_translate"><p> 我正在尝试学习如何使用 javascript getElementsByClassName("&lt;classname&gt;").outerHTML=""在网页上隐藏&lt;div&gt;部分。</p><p> 如果我要隐藏的元素例如&lt;div class="someclassname"&gt;Some content I want to hide&lt;/div&gt; ，这一切都很好。 或者，如果使用getElementByID("&lt;divId&gt;")如果使用例如&lt;div id="somedivID"&gt; ，我会成功。</p><p> 问题是，当想要隐藏没有id的&lt;div&gt;并且为 div 的 class 列出多个名称时，如下所示：</p><pre> &lt;div class="cake forest carousel"&gt;Some content I want to hide.&lt;/div&gt;</pre><p> 如何隐藏这样一个没有 id 且没有单个 class 名称的 div？</p></div></classname>

Question

I am trying to learn how to hide <div> sections on a webpage, using javascript getElementsByClassName("<classname>").outerHTML="" .

It all works great if the element I am hiding eg <div class="someclassname">Some content I want to hide</div> . Or, I have success if using getElementByID("<divId>") if working with eg <div id="somedivID"> .

The problem is, when wanting to hide a <div> that has no id and when there are multiple names listed for the div's class such as below:

<div class="cake forest carousel">Some content I want to hide.</div>

How can I hide such a div that has not id and no single class name?

Answer 1

For classes, you can use document.querySelectorAll() along with css selectors, like this:

 document.querySelector('button').addEventListener('click', () => { document.querySelectorAll('.cake')[0].style.display = 'none'; });

 <div class="cake forest carousel">Some content I want to hide.</div> <button>Hide content</button>

With classNames, remember that you can specify ALL the classNames (sometimes that is useful to pinpoint one element if there are other elements that contain part of the classList:

document.querySelectorAll('.cake.forest.carousel')[0] . . .

Also note that document.querySelectorAll() returns a collection , not a string - which is why it is necessary to use the [0] notation to choose the first element returned in the collection.

Using getElementsByClassName() is much the same idea - again, it returns a collection and one must either use the [0] notation to get the first element (usually if only one is returned), or a forEach() loop to choose the desired element based on other criteria.

 document.querySelector('button').addEventListener('click', () => { document.getElementsByClassName('cake forest')[0].style.display = 'none'; });

 <div class="cake forest carousel">This div has classes cake, forest and carousel</div> <div class="cake">This div only has class cake</div> <button>Hide divs with classes cake AND forest</button>