이전 제거 <select><option> appendChild로 새 항목을 선택하면

Question

<li> 클릭하면 정보가 json으로 전송됩니다.

"55,63"은 json의 데이터입니다.

코드 :

$('li.channel').click(function(){ 
    setTimeout(function(){ 
     var numbers = "55,63"; 
     var number = numbers.split(','); 
     var select = document.getElementById('selectElement'); 
     for (f = 1; f < (countdata); f++){ 
      q = description(f); 
      var opt = document.createElement('option'); 
      opt.value = number[f]; 
      opt.innerHTML = q; 
      select.appendChild(opt); 
     } 
    }, 5000); 
}); 
<select id="selectElement"></select> 

결과 :

<select id="selectElementId"> 
<option value="55">effects - Russian</option> 
<option value="63">effects - English</option> 
</select> 

다음, 내가 다른 <li>에 클릭하면, 내가 JSON에 새로운 데이터를 얻고있다.

이전의 모든 <option> 요소를 제거하고 새로운 'Numbers'로 새로운 <option>을 가져오고 싶습니다. 내가 다른 <li>, 내 <select> 요소 받고 업데이트하기 위해 클릭 할 때 그러나 :

<select id="selectElementId"> 
<option value="55">effects - Russian</option> 
<option value="63">effects - English</option> 
<option value="203">clean - Latvian</option> 
<option value="207">clean - English</option> 
</select> 

어떻게 jQuery를/자바 스크립트를 사용하여 이전 데이터를 제거하려면?

Answer 1

그냥 할 수 empty() 사용 :

$('li.channel').click(function(){ 
    setTimeout(function(){ 
     var numbers = "55,63"; 
     var number = numbers.split(','); 
     var select = document.getElementById('selectElement'); 
     $(select).empty(); //empty the select 
     for (f = 1; f < (countdata); f++){ 
      q = description(f); 
      var opt = document.createElement('option'); 
      opt.value = number[f]; 
      opt.innerHTML = q; 
      select.appendChild(opt); 
     } 
    }, 5000); 
}); 

DOCUMENTATION