How to hide a div using javascript

Question

I want to hide a div using Javascript. Below is my div.

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog-message" class="ui-dialog-title"> </span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
</div>

I tried below javascript, but didnt work.

   $(".ui-dialog-titlebar").css('display','none');

Any idea?

wrap it in document.ready . Also you can simply use $(".ui-dialog-titlebar").hide() — Anoop Joshi P
– Anoop Joshi P, Commented Sep 10, 2014 at 12:08
$(document).ready(function(){$(".ui-dialog-titlebar").hide() ;}); — Anoop Joshi P
– Anoop Joshi P, Commented Sep 10, 2014 at 12:09

hitesh upadhyay · Accepted Answer · 2014-09-10 12:09:29Z

2

you have so many ways

$(".ui-dialog-titlebar").hide();
$(".ui-dialog-titlebar").fadeOut();
$(".ui-dialog-titlebar").css('display','none !important');

answered Sep 10, 2014 at 12:09

hitesh upadhyay

2641 silver badge9 bronze badges

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

2 Comments

Ehsan Sajjad Over a year ago

important is not needed as this will aply css inline and it has highest priority

T J Over a year ago

@EhsanSajjad !important has highest priority. inline styles will not override !important.

Bhojendra Rauniyar · Accepted Answer · 2014-09-10 12:13:44Z

2

That's not javascript, but jQuery:

You can simply use hide() method:

$(".ui-dialog-titlebar-close").hide(); // you can also use css() method as yours

And you need to wrap your code inside ready handler:

$(document).ready(function(){
//your code here
});

You can learn more about jQuery here.

edited Sep 10, 2014 at 12:13

answered Sep 10, 2014 at 12:08

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Comments

Ehsan Sajjad · Accepted Answer · 2014-09-10 12:08:44Z

1

Put it in document.ready():

$(function(){

 $(".ui-dialog-titlebar-close").css('display','none');

})

and you can also use hide():

$(function(){

     $(".ui-dialog-titlebar-close").hide();

})

FIDDLE EXAMPLE:

http://jsfiddle.net/qcfdLjr3/

answered Sep 10, 2014 at 12:08

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Comments

HEEN · Accepted Answer · 2014-09-10 12:11:40Z

1

ideally hiding with ID would be more flexible way.

  <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" id="hidingDiv">
        <span id="ui-dialog-title-dialog-message" class="ui-dialog-title"></span>
        <a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
            <span class="ui-icon ui-icon-closethick">close</span>
        </a>
    </div>

JS code for hiding:-

    $(document).ready(function() {
        $("#hidingDiv").hide();
    });

answered Sep 10, 2014 at 12:11

HEEN

4,75414 gold badges85 silver badges173 bronze badges

Comments

Sadikhasan · Accepted Answer · 2014-09-10 12:11:36Z

0

Try this

$(document).ready(function(){
    $(".ui-dialog-titlebar").hide();
});

answered Sep 10, 2014 at 12:11

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

Comments

Suchit kumar · Accepted Answer · 2014-09-10 12:13:16Z

0

you can use you own code as:

$(document).ready(function(){
    $(".ui-dialog-titlebar").css('display','none');

or $(".ui-dialog-titlebar").hide(); });

because before doing all there document should be ready.

answered Sep 10, 2014 at 12:13

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to hide a div using javascript

6 Answers 6

2 Comments

Comments

FIDDLE EXAMPLE:

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

FIDDLE EXAMPLE:

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related