Удалить текстовые поля

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; 
    } 

} 

Вышеупомянутое не снимает неразрывное пространство.

Answer 2

Положите класс на текстовое поле, таких как класс = "HideTheseTextBoxes"

Использование JQuery, чтобы скрыть те на событие OnClick

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