jQueryで動的に作成されたDIVを削除します

Question

ページ間のフェードトランジションを使用するスクリプトを作成しました。 divにページを読み込み、古いページの上に新しいページをフェードインします。

jQueryを使用してdivを消去した後にdivを削除しようとしています。

コードをデバッグすると、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

、あなたはその親を通してそれを参照する必要があります。だから、場合には、少なくとも1つの親のdivを持っているあなたのhtmlを更新することができます。

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

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

よろしく

Answer 2

@デビッドエスピーノのポストに基づいて私の答え

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>