CODEWITHSUNDEEP
jqueryhtml
Victor Stoddard
Victor Stoddard

Reputation: 3721

Remove dynamically-created DIV with jQuery

I made a script to use a fade transition between pages. It loads the pages into divs, fading in the new one over the old one.

I am trying to remove a div after the one covering it finishes fading in using jQuery.

When I debug the code, the div still appears in the DOM.

var lastDivId;

var firstURL = "https://jsfiddle.net/user/dashboard/";
var secondURL = "https://jsfiddle.net/user/dashboard/edit/";

$(document).ready(function() {
  setTimeout(function() {
    openPopup(firstURL, 1);
  }, 1); //load the start page
  setTimeout(function() {
    openPopup(secondURL, 2);
  }, 3000); //load another page 3 seconds later
});

function openPopup(url, divID) {
  divID = "i" + divID; // ID can't just be a number
  $(document.body).append('<div class="divContainer" id="' + divID + '"><object data="' + url + '" /></div>');
  $('#' + divID).ready(function() {
    $('#' + divID).css("display", "none"); //make it visible after it's ready. it must be visible for it to get ready.
    $('#' + divID).fadeIn(2000, function() {
      // FadeIn complete. now remove old layer
      $('#' + lastDivId).remove();
      lastDivId = divID;
    });
  });
}

Here's the fiddle: https://jsfiddle.net/Henry3000/amh4upb4/3/

Upvotes: 0

Views: 398

Answers (2)

Victor Stoddard
Victor Stoddard

Reputation: 3721

My answer based on @David Espino's post

var firstURL = "http://stackoverflow.com/help/badges"; //shoud be same domain as script
var secondURL = "http://stackoverflow.com/questions/41688143/remove-dynamically-created-div-with-jquery/41688743#41688743"; //should be same domain as sript

$(document).ready(function() {
  openPopup(firstURL, 1); //load the start page
  setTimeout(function() {
    openPopup(secondURL, 2);
  }, 3000); //load another page 3 seconds later 
});

function openPopup(url, divID) {
  var globalParent = $('#divParent');
  divID = "i" + divID; // ID can't just be a number
  $(globalParent).append('<div class="divContainer" id="' + divID + '"><object data="' + url + '" /></div>');
  $('#' + divID).ready(function() {
    $('#' + divID).css("display", "none"); //make it visible after it's ready. it must be visible for it to get ready.
    $('#' + divID).fadeIn(2000, function() {
      // FadeIn complete. now remove old layer
      if (globalParent.children().length > 1) {
        // this is removing the previously one added
        $(globalParent.children()[0]).remove();
      }
    });
  });
}
body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.divContainer {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='divParent'></div>

Upvotes: 0

David Espino
David Espino

Reputation: 2187

Assuming you always delete the most recent one, since the object cannot be removed pointing directly to it, you need to reference it through its parent. So in case you can update your html to at least have one parent div:

<div id='divParent'></div>

https://jsfiddle.net/thyysbxr/1/

Regards

Upvotes: 1

Related Questions