What is the best way to completely eliminate a div from a webpage

Question

What is the best way to completely eliminate a div from a webpage

I've created a new div element using jQuery:

$(document.body).append('<div id="test"></div>');

Then, I display a success message and remove the div after 10 seconds:

$('test').html('SUCCESS!');
setTimeout(function(){
  $('#test').remove();
}, 10000);

After that, I check if the div removal is complete and log a message to the console:

$(window).on('scroll', function () {
    if($('#test').length === 0){
      console.log('DIV removed!');
    } else {
      console.log('DIV not removed!!!')
    }
}

Unfortunately, when I scroll up or down, the message "DIV not removed!!!" is displayed.

Can anyone explain why my div is not being removed?

javascript html jquery css ecmascript-6

Answer 1

Answer №1

Upon adding your "check" to the DOM, you immediately execute a check on it. The actual removal of the "check" occurs ten seconds later.

To illustrate the difference in code placement, I have made adjustments to the example. Feel free to click run and see the results.

I have also reduced the time from 10 seconds to 2 seconds for a quicker demo.

In essence, make sure to run the code intended to execute after the removal right after the removal line itself.

$(document.body).append('<div id="test"></div>');

$('#test').html('SUCCESS!');
setTimeout(function(){
  $('#test').remove();
  
  // Executed LATER
  if($('#test').length === 0){
    console.log('[LATER] DIV removed!');
  } else {
    console.log('[LATER] DIV not removed!!!')
  }
}, 2000);

// Executed immediately, Before setTimeout has finished
if($('#test').length === 0){
  console.log('[IMMEDIATE] DIV removed!');
} else {
  console.log('[IMMEDIATE] DIV not removed!!!')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Upon adding your "check" to the DOM, you immediately execute a check on it. The actual removal of the "check" occurs ten seconds later.

To illustrate the difference in code placement, I have made adjustments to the example. Feel free to click run and see the results.

I have also reduced the time from 10 seconds to 2 seconds for a quicker demo.

In essence, make sure to run the code intended to execute after the removal right after the removal line itself.

$(document.body).append('<div id="test"></div>');

$('#test').html('SUCCESS!');
setTimeout(function(){
  $('#test').remove();
  
  // Executed LATER
  if($('#test').length === 0){
    console.log('[LATER] DIV removed!');
  } else {
    console.log('[LATER] DIV not removed!!!')
  }
}, 2000);

// Executed immediately, Before setTimeout has finished
if($('#test').length === 0){
  console.log('[IMMEDIATE] DIV removed!');
} else {
  console.log('[IMMEDIATE] DIV not removed!!!')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

Answer №2

// When the page loads
$(function(){
  // Set the body height to 1000px to support scroll events
  $('body').css('height','1000px');
  
  // Append a new div with id "test" to the body
  $(document.body).append('<div id="test"></div>');
  $('#test').html('SUCCESS!');
  
  // Remove the div after 2 seconds
  setTimeout(function(){
    $('#test').remove();
  }, 2000);
  
  // Scroll event listener
  $(window).on('scroll', function () {
      if($('#test').length === 0){
        console.log('DIV removed!');
      } else {
        console.log('DIV not removed!!!')
      }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

// When the page loads
$(function(){
  // Set the body height to 1000px to support scroll events
  $('body').css('height','1000px');
  
  // Append a new div with id "test" to the body
  $(document.body).append('<div id="test"></div>');
  $('#test').html('SUCCESS!');
  
  // Remove the div after 2 seconds
  setTimeout(function(){
    $('#test').remove();
  }, 2000);
  
  // Scroll event listener
  $(window).on('scroll', function () {
      if($('#test').length === 0){
        console.log('DIV removed!');
      } else {
        console.log('DIV not removed!!!')
      }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

What is the best way to completely eliminate a div from a webpage

Answer №1

Answer №2

Similar questions

The art of revealing and concealing code blocks in AngularJS

Changing the text in a Bootstrap tool-tip

Tips for personalizing your Magento 2 theme

A method to verify the presence of a specific element within a list using JavaScript

What is the best way to transfer information from JavaScript to a JSON database using the fetch API?

PHPBB authentication system

Expanding the jQuery AutoComplete Plugin: A Guide to Implementing the bind keyup Event

Tips for invoking an asynchronous function within an if condition?

Exploring the ins and outs of console interactions in JavaScript

Switch out an item within a list of objects with a different item

Angular ng-if directive contains a specific class

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Text alongside a perfectly aligned image

List arranged in order with a hyperlink in the center and an image positioned on the right side

Implement the usage of plainToClass within the constructor function

Tips on deleting specific elements from an array by utilizing the splice method

Struggling with implementing private npm modules using require() and import

Using multiple selectors in JQuery and Javascript

Implementing a hamburger menu and social media sharing buttons on websites

error 404 when sending a xhr request in node and react js