删除文本框

本文关键字:文本 删除 | 更新日期: 2023-09-27 18:20:03

我知道这可能是一个简单的问题,但我一直在寻找一种方法来删除按钮点击时的文本框,我用这行代码添加了文本框。

 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' />"          
  } 

这可能是错误的方法,但对我来说很有效。如果再次单击同一按钮,有什么方法可以删除元素吗?

任何帮助都将不胜感激

删除文本框

您的问题被标记为"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; 
    }
}

不过,以上内容并没有删除不间断的空格。

在文本框上放置一个类,如class="HideTheseTextBoxes"

使用jQuery来隐藏onclick事件上的那些

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