J'ai fait un script pour utiliser une transition de fondu entre les pages. Il charge les pages en divs, se fondant dans la nouvelle sur l'ancienne.

J'essaie de supprimer un div après que celui qui le recouvre ait fini de s'estomper en utilisant jQuery.

Lorsque je débogue le code, le div apparaît toujours dans le 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;
    });
  });
}

Voici le violon: https://jsfiddle.net/Henry3000/amh4upb4/3/

0
Victor Stoddard 17 janv. 2017 à 05:25

2 réponses

Meilleure réponse

En supposant que vous supprimiez toujours le plus récent, puisque l'objet ne peut pas être supprimé en pointant directement vers lui, vous devez le référencer via son parent. Donc, au cas où vous pouvez mettre à jour votre html pour avoir au moins un div parent:

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

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

Cordialement

1
David Espino 17 janv. 2017 à 03:45

Ma réponse basée sur le post de @David Espino

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>
0
Victor Stoddard 17 janv. 2017 à 04:44