Question

I am loading some text from a database via $.post. Sometimes on page load the screen is just blank, when I inspect element the div it is set to <div id="#panel" style="display:none">, I don’t know why this is happening, though before the $.post I am fading out the div and when the $.post gets an output, I bring back the div.

$('#panel').html(output).show();

I am using $("#panel").fadeOut(100); so I can make my loading.gif work.

Is there any way to check if #panel’s style is set to display:none and if it is, then remove it.

Thanks.

EDIT: My function I call on checkbox change and page load

$("#loading").show();
$("#panel").fadeOut(100);
$('#options :input').prop('disabled', true);
$('#loading').html("<img src='loading.gif'>"); 
var langSelected = $('input[name=text]:checked').map(function() {return $(this).parent().text();}).get().join(",");

$.post('http://mywebsite.com/data.php', { value: languages.url.value, mycheckboxes: langSelected},
function(output) {
    $('#panel').html(output).show(); 
    $('#loading').hide();
    $('#options :input').removeAttr('disabled');

});

Answer 1

Try this:

if ($('#panel').is(':hidden')) {
     $('#panel').remove()
}

or:

$('#panel:hidden').remove()

However instead of removing the div you can use the error method:

$.post("example.php", function() {
      // success
}).error(function() { 
      $('#panel').show()
      // error
})