how to hide all divs in jquery

Question

I have several divs:

<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
<div id="div-4"></div>

How can I hide them all with jquery. I used $('#div').hide(); and did not work.

Solution 1

You are using an id in your selector. Simply use:

$('div').hide();

However that will hide literally all divs. How about you hide only divs that have an id in the form of div-x?

$('div[id^="div-"]').hide();

This will only hide the divs you mentioned without hiding other divs (which might be problematic).

Solution 2

for more detail you can read this : Element Selector (“element”)

this will do : $('div').hide();

there is no need of # sign which is for the id selector for jquery , if you want to hide element just write the name of element will do your task thats called as "element selector".

Solution 3

The problem is you are specifying an id in your selector. Use this instead:

$('div').hide();

Solution 4

Take out the hash and just do $('div').hide(); because right now you are hiding all elements with an id of "div"

Solution 5

jQuery uses CSS-selectors, so this hides all divs:

$('div').hide();

However, if you want to hide the divs whose id begins with "div", as in your example, do this:

$('div[id^="div"]').hide();

View more solutions

Comments

[Yassine Younes]

Perfect answer. Thnx.

[Parapluie]

I had no idea that you could use substring selectors in jQuery. My eyes have been opened, and I have seen the light!