How to hide dynamic content using jQuery/javascript?

Question

I'm currently using a service for autocompleting my search boxes. However, for all the autocompleted results that show up, there's always a <div> ad on the bottom following the <li>s. Something like this:

<ul>
<li class="menu-item""></li>
<li class="menu-item""></li>
<li class="menu-item""></li>
<div style="text-align:center;border-top:1px solid black;"></div>
<a href="http://www.ad.com" target="_blank">ad</a>
</ul>

However, this is loaded dynamically using JS so I don't know how I would write jQuery to hide() it. Is there a way I could dynamically hide it when someone does a search?

For starters, your HTML is invalid.

Diodeus - James MacFarlane
– Diodeus - James MacFarlane

2013-03-14 19:29:19 +00:00
Commented Mar 14, 2013 at 19:29 — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Mar 14, 2013 at 19:29
sorry I forgot to paste the end

bigpotato
– bigpotato

2013-03-14 19:30:08 +00:00
Commented Mar 14, 2013 at 19:30 — bigpotato
– bigpotato, Commented Mar 14, 2013 at 19:30

Niet the Dark Absol · Accepted Answer · 2013-03-14 19:29:26Z

2

You could do something like this in your CSS:

ul>* {display:none}
ul>li {display:block}

After all, it is only valid for <ul> elements to have <li> children, so you should be able to hide everything else as invalid.

answered Mar 14, 2013 at 19:29

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bigpotato Over a year ago

will this work for nodes that are not present in the initial load of the DOM? the li's and div are generated dynamically when someone types a search term, so it doesn't exist in the initial load

loxxy Over a year ago

@Edmund yes, it will be applied as and when the nodes load on page.

bigpotato Over a year ago

is there a way to make this CSS line load after all the other CSS files in this app? my line is being overridden by the Ad company's CSS.

Niet the Dark Absol Over a year ago

Add !important before each } to make it override the ad company's CSS. Or you could just find a solution that doesn't involve an ad ;)

loxxy · Accepted Answer · 2013-03-14 19:30:18Z

0

If you are sure of the structure, you can always address it in jquery as

$("ul").find("a,div").hide()

Best would be of course css, as Kolink answered.

answered Mar 14, 2013 at 19:30

loxxy

13.2k2 gold badges28 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to hide dynamic content using jQuery/javascript?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related