刪除文本框

Question

我知道這可能是一個簡單的問題，但我一直在尋找一種方式來刪除按鈕上點擊文本框，我此行的代碼添加在文本框中。

function SearchAddressFields(){ 

     my_div.innerHTML = my_div.innerHTML + "<br> <label for='txtSearch'>Street Number:</label> <input type='text' id='txtStreetNum' />" 
     my_div.innerHTML = my_div.innerHTML + "<label for='txtSearch'>PreDir:</label> <input type='text' id='txtPreDir' />" 
     my_div.innerHTML = my_div.innerHTML + "<label for='txtSearch'>PreType:</label><input type='text' id='txtPreType' /> " 
     my_div.innerHTML = my_div.innerHTML + "<label for='txtSearch'>Street Name:</label><input type='text' id='txtStreetName' /> " 
     my_div.innerHTML = my_div.innerHTML + "<label for='txtSearch'>Suf Dir</label><input type='text' id='txtSufDir' />" 
     my_div.innerHTML = my_div.innerHTML + "<input type='button' id='btntest' onclick='searchAddress()' value='Search'/>" 
     my_div.innerHTML = my_div.innerHTML + "<input type='button' id ='reset' onclick='resetbutton()' value='Reset' />"   
    } 

這可能是錯誤的做法，但它適用於我。如果再次單擊相同的按鈕，是否有任何方法可以刪除元素？

任何幫助，將不勝感激

Answer 1

你的問題標記爲「jQuery的」，所以希望這將幫助：

之外的功能，你可以有跟蹤，如果內容已經另一個變量補充：

var haveElementsBeenAdded = false; 

function SearchAddressFields(){ 

    if(!haveElementsBeenAdded){ 
     my_div.innerHTML = my_div.innerHTML + "<br> <label for='txtSearch'>Street Number:</label> <input type='text' id='txtStreetNum' />"; 
     my_div.innerHTML = my_div.innerHTML + "<label for='txtSearch'>PreDir:</label> <input type='text' id='txtPreDir' />"; 
     my_div.innerHTML = my_div.innerHTML + "<label for='txtSearch'>PreType:</label><input type='text' id='txtPreType' /> "; 
     my_div.innerHTML = my_div.innerHTML + "<label for='txtSearch'>Street Name:</label><input type='text' id='txtStreetName' /> "; 
     my_div.innerHTML = my_div.innerHTML + "<label for='txtSearch'>Suf Dir</label><input type='text' id='txtSufDir' />"; 
     my_div.innerHTML = my_div.innerHTML + "<input type='button' id='btntest' onclick='searchAddress()' value='Search'/>" 
     my_div.innerHTML = my_div.innerHTML + "<input type='button' id ='reset' onclick='resetbutton()' value='Reset' />" ;  
     haveElementsBeenAdded = true; 
    } 
    else{ 
     $(my_div).find('input').remove(); 
     $(my_div).find('label').remove(); 
     haveElementsBeenAdded = false; 
    } 

} 

雖然上面並沒有刪除non-breaking空間。

Answer 2

放在文本框中類如class = 「HideTheseTextBoxes」

使用jQuery來隱藏這些在onclick事件

$(".HideTheseTextBoxes").hide();