Удалить динамически созданный DIV с помощью jQuery

Question

Я создал сценарий для использования перехода с постепенным переходом между страницами. Он загружает страницы в div, затухает в новой по старой.

Я пытаюсь удалить div после того, как он накрывает его, заканчивая затухание при использовании jQuery.

Когда я отлаживаю код, div все еще появляется в 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; 
    }); 
    }); 
} 

Вот скрипку: https://jsfiddle.net/Henry3000/amh4upb4/3/

Answer 1

Предполагая, что вы всегда удалить последний один, так как объект не может быть удален, указывая прямо на него, вы должны ссылаться на него через его родителей. Таким образом, в случае, если вы можете обновить HTML, по крайней мере, один родительский DIV:

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

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

С уважением

Answer 2

Мой ответ, основанный на пост @David Эспино в

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>