Entfernen Sie dynamisch erstellte DIV mit jQuery

Question

Ich machte ein Skript, um einen Überblendung Übergang zwischen den Seiten zu verwenden. Es lädt die Seiten in divs und blendet die neue über die alte ein.

Ich versuche, ein div zu entfernen, nachdem das eine, das es abdeckt, mit jQuery einblendet.

Wenn ich den Code debuggen, wird das DIV immer noch im DOM angezeigt.

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; 
    }); 
    }); 
} 

Hier ist die Geige: https://jsfiddle.net/Henry3000/amh4upb4/3/

Answer 1

Angenommen Sie haben die jüngsten immer gelöscht werden, da das Objekt nicht direkt mit ihm entfernt werden, zeigt, müssen Sie sie durch ihre Eltern verweisen. So im Falle können Sie Ihre HTML aktualisieren mindestens ein Elternteil div haben:

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

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

Grüße

Answer 2

Meine Antwort basiert auf @ David Espino der 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>