javascriptの関数で作成された動的要素の量を制限する方法は？

Question

getPage()との動的リンクを<option>タグのリストから作成しています。それは素晴らしい作品です。唯一の問題は、ユーザーが別のオプションを選択して、前のリンクの隣に別のリンクが作成されている場合です。ユーザーの選択によって別のリンクが作成された場合は、javascriptに1つのリンクを削除するように伝えたいと思います。

div.innerHTML = '';

：

HTML

<!-- Dynamic Options --> 
<select id="pages" onchange="getPage();"> 
<option><?=$selectpage;?></option></select> 

<!-- Append dynamic link here --> 
<div id="page_link"></div> 

javascriptの

function getPage(){ 

//get select element 
var e = document.getElementById("pages"); 

//get value of select option 
var f = e.options[e.selectedIndex].value; 

//create link when user selects option 
var link = "nextpage.php?mylink=" + f; 
var element = document.createElement("a"); 
var div = document.getElementById("page_link"); 
element.setAttribute("href", link); 

//append classes to link 
element.innerHTML = "Continue with selected option"; 
element.className += "btn "; 
element.className += "btn-lg "; 
element.className += "btn-default "; 
element.className += "pull-right "; 

//append link to div 
div.appendChild(element); 
} 

Answer 1

一つの簡単な方法は、divのinnerHTMLプロパティをクリアすることですただ、 `div.appendChild（要素の前

function getPage() { 
    //get select element 
    var e = document.getElementById("pages"); 

    //get value of select option 
    var f = e.options[e.selectedIndex].value; 

    //create link when user selects option 
    var link = "nextpage.php?mylink=" + f; 
    var element; 

    if (document.getElementById("a_link") == null) { 
     element = document.createElement("a"); 
     element.id = "a_link" 
    } 
    else 
     element = document.getElementById("a_link"); 

    var div = document.getElementById("page_link"); 
    element.setAttribute("href", link); 

    //append classes to link 
    element.innerHTML = "Continue with selected option"; 
    element.className += "btn "; 
    element.className += "btn-lg "; 
    element.className += "btn-default "; 
    element.className += "pull-right "; 

    //append link to div 
    div.appendChild(element); 
}