删除文本框

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();