0

I have following div in my page with some css. with this I have few div on top and below it.

HTML:

  <div id="sentdiv"></div>

CSS:

#sentdiv{
    margin-left: 13rem;
    margin-right: 20rem;
    width: 800px;
    height: 600px;
    padding: 50px;

}

Then I have a ajax call where in I am loading some html page like below.

JS:

$.post('/logme', function(resp) {
    $("#sentdiv").load("success.html");
});

here I want to unload the success.html after 5 sec and keep the div with its CSS.

I have tried following 

$("#sentdiv").delay(5000).replaceWith("<p>");
$("#sentdiv").delay(5000).fadeOut();

but It is moving the elements below it. I want to keep div and just remove the contents of div.

Nikhil Kulkarni
  • 644
  • 1
  • 6
  • 23
  • [`empty`](http://api.jquery.com/empty/) – Heretic Monkey Nov 08 '18 at 22:44
  • 1
    `delay()` is not a replacement for `setTimeout()`, as specifically noted in the API. `delay()` only affects the timing of animations that jQuery performs using it's internal animation queue. – Taplar Nov 08 '18 at 22:54
  • Look at [Wait 5 seconds before executing next line](https://stackoverflow.com/q/14226803/215552) in addition to the doc I posted earlier. – Heretic Monkey Nov 08 '18 at 23:00
  • Possible duplicate of [How can I remove everything inside of a
    ](https://stackoverflow.com/questions/6000073/how-can-i-remove-everything-inside-of-a-div)
     – Heretic Monkey Nov 08 '18 at 23:21

1 Answers1

1

use the jquery method .empty()

 $("#sentdiv").empty();


setTimeout(function() {
 $("#sentdiv").empty();
}, 5000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sentdiv">

<span>this will be removed in five seconds...</span>

</div>
zfrisch
  • 8,474
  • 1
  • 22
  • 34