показать и скрыть на основе раскрывающегося списка

Question

У меня есть раскрывающиеся поля, которые при изменении должны отображать кнопку, которая может загружать файлы на основе раскрывающегося списка. Проблема в том, что она удерживает кнопку добавления, поэтому, если выбрано 1, она показывает кнопку 1, при выборе другой опции она добавляет еще одну кнопку и так далее. Таким образом, при каждом выборе кнопка продолжает складываться, а не просто показывать одну кнопку. Я попытался добавить $ ('# buttondownload'). Remove(), но он не работает должным образом. Вот код:

 function showFields(this) { 
 
    if (this.value == "1" || this.value == "2") 
 
\t { 
 
\t \t download.style.display = "block"; 
 
\t } 
 
\t if (this.value == "") 
 
\t { 
 
\t \t download.style.display = "none"; 
 
\t } 
 
\t if (this.value == "1") 
 
\t { 
 
\t \t var file = "'test.pdf"; 
 
\t } 
 
\t if (this.value == "2") 
 
\t { 
 
\t \t var file = "test2.pdf"; 
 
\t } 
 
    html = '<button type="button" onClick="location.href='+ file + '">Download File</button>' 
 
\t $('#buttonDownload').append(html); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="ID" name="ID" onChange="showFields(this);"> 
 
\t \t <option value="">Select</option> 
 
\t \t <option value="1">1</option> 
 
     <option value="2">2</option> 
 
\t </select> 
 
    <div id="download"><div id="buttonDownload"></div></div>

Answer 1

Вам нужно очистить контейнер перед добавлением новой кнопки:

$('#buttonDownload').empty().append(html); 

Answer 2

Вы append ИНГ кнопку. вместо того, чтобы заменить кнопку старого:

function showFields() { 
 
    // ... 
 

 
    html = '<button type="button" onClick="location.href=XXX">Download File</button>' 
 
    $('#buttonDownload').html(html); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="ID" name="ID" onChange="showFields(this);"> 
 
    <option value="">Select</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
</select> 
 
<div id="download"> 
 
    <div id="buttonDownload"></div> 
 
</div>