Удаление текстового поля при нажатии кнопки

У меня есть две текстовые метки:

<div>           
    <input type="text" id="textfield1" size="5"/>
</div>

<div>          
    <input type="text" id="textfield2" size="5"/>           
</div>

Я хотел бы иметь кнопку "Clear", которая удалит оба этих поля.

Насколько мне известно, я знаю, что для реализации кнопки я должен использовать такой код:

<div>      
    <input type="button" value="Clear Fields" onclick=SOMETHING />
</div>

Какие-нибудь подсказки о том, как реализовать SOMETHING?

Ответы

Ответ 1

Как насчет простой кнопки сброса?

<form>

  <input type="text" id="textfield1" size="5">
  <input type="text" id="textfield2" size="5">

  <input type="reset" value="Reset">

</form>

Ответ 2

Простая функция JavaScript выполнит эту работу.

function ClearFields() {

     document.getElementById("textfield1").value = "";
     document.getElementById("textfield2").value = "";
}

И просто нажмите кнопку:

<button type="button" onclick="ClearFields();">Clear</button>

Ответ 3

Если вы хотите сбросить его, то простое использование:

<input type="reset" value="Reset" />

Но будьте осторожны, он не очистит текстовые поля, которые имеют value умолчанию. Например, если у нас есть следующие текстовые поля и по умолчанию они имеют следующие значения:

<input id="textfield1" type="text" value="sample value 1" />
<input id="textfield2" type="text" value="sample value 2" />

Итак, чтобы очистить его, добавьте в него javascript:

function clearText()  
{
    document.getElementById('textfield1').value = "";
    document.getElementById('textfield2').value = "";
}

И прикрепить его к onclick кнопки сброса:
<input type="reset" value="Reset" onclick="clearText()"/>

Ответ 4

Что-то вроде этого добавит кнопку и позволит вам использовать ее для очистки значений

<div>           
<input type="text" id="textfield1" size="5"/>         
</div>

<div>          
<input type="text" id="textfield2" size="5"/>           
</div>

<div>
    <input type="button" onclick="clearFields()" value="Clear">
</div>


<script type="text/javascript">
function clearFields() {
    document.getElementById("textfield1").value=""
    document.getElementById("textfield2").value=""
}
</script>