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?
you have so many ways
$(".ui-dialog-titlebar").hide(); $(".ui-dialog-titlebar").fadeOut(); $(".ui-dialog-titlebar").css('display','none !important'); 
!important has highest priority. inline styles will not override !important.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.
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(); }) 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(); }); Try this
$(document).ready(function(){ $(".ui-dialog-titlebar").hide(); }); 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.
