删除现有div的内容不起作用

Question

I have a function that gets data back from php and if it receives "unauthorized", it's supposed to show a modal explaining the possible error AND remove any content from the div. It basically does this, but the code still remains, so someone could just look at the source and read what's there.

#main_content starts out as display:hidden , so I wouldn't think it would appear at all with the code I have.

function callCharts() {
    $.ajax({
        url: 'all_data.php',
        type: 'GET',     
        success: function(data) {
            var check = data;

            if (check =='unauthorized') {
                $('#main_content').remove();
                // also have tried .empty and .html("")
                $('#unauthorized_modal').modal('show');
            }
            else {
                $('#main_content').css("display","inherit");
                console.log("authorized");
            }
        }
    });
}

Relevant HTML

 <div id="main_content" style="display:none;">
 <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="block-flat" style="margin-bottom:10px; ">
        <div class="header">
          <h3 style="display:inline;">Data Overview</h3>
        </div>

      </div>
    </div>
  </div>
 </div>

Answer 1

You need to put your ajax function within this

$( document ).ready(function() {
    callCharts();
});