0

I added some external HTML data to div, but I am not able to remove it later. So I simplified the code to the below to read text only, but the problem is still there:

HTML part 

<div class="right_cell" id="right_cell" style="position:absolute; border-style:solid; border-width: 3px; left:15%;width:calc(80%);height:calc(100%)">
</div>

JavaScript part

var $htmlDiv = $("<div class='html_div'></div>");

$.get('pages/no_use.html').success(function (data) {
       $(".right_cell").append($htmlDiv);
       $htmlDiv.append("<p>sample text</p>");
       //$htmlDiv.empty();   works here
});
$htmlDiv.empty();  // not work

After running the code, the "sample text" is still on the page, but if I move "$htmlDiv.empty();" inside the function, it works, I just can not see the difference...I need to remove the content in htmlDiv in another function later, but it looks like it is never working...Is there a way to do this? Thanks.

flyingbee
  • 601
  • 1
  • 7
  • 17
  • 3
    `$.get()` is asynchronous. this is expected behaviour – Satpal Aug 03 '15 at 06:59
  • Your problem is that `$.get()` function is an override of `$.ajax()` function, so is an AJAX petition. This is asynchronous and it runs in a determinate time variable depeding on the connection and server speed and browsers response. – Marcos Pérez Gude Aug 03 '15 at 07:01
  • Put a `$.Deferred` object to solve it. – Marcos Pérez Gude Aug 03 '15 at 07:02
  • Thanks. Can please show me how to use the deferred object? or, Can I simply use: var $htmlDiv = $("
    "); $(".right_cell").append($htmlDiv); $htmlDiv.append("

    sample text

    "); to add the element, but it still doesn't work....
     – flyingbee Aug 04 '15 at 01:22

0 Answers0