Как очистить текст текстового элемента управления динамически?

Question

У меня есть таблица строк, и каждая строка имеет кнопку редактирования. Когда я нажимаю кнопку, я могу установить значения строк для формирования элементов управления в форме.

Я ожидаю, что когда я позвоню $('#txtFirstName').empty(), он должен очистить текст в txtFirstName. Вместо этого текст не очищается, и когда я снова вызываю форму, он показывает старый текст в этом элементе управления.

Есть ли способ очистить текст в элементе управления?

$('#btnClear').click(function() { 
    $('#txtFirstName').empty(); 
    $('#txtLastName').empty(); 
} 

Исходный код показывает, что данные были удалены.

<tr> 
    <td> 
     <label for="employee_FirstName">First Name</label> 
    </td> 
    <td> 
     <input class="form-control" data-val="true" data-val-required="The First Name field is required." id="txtFirstName" name="employee.FirstName" placeholder="First Name" style="width:400px" type="text" value="" /> 
    </td> 
    <td> 
     <span class="field-validation-valid" data-valmsg-for="employee.FirstName" data-valmsg-replace="true"></span> 
    </td> 
</tr> 
<tr> 
    <td> 
     <label for="employee_LastName">Last Name</label> 
    </td> 
    <td> 
     <input class="form-control" data-val="true" data-val-required="The Last Name field is required." id="txtLastName" name="employee.LastName" placeholder="Last Name" style="width:400px" type="text" value="" /> 
    </td> 
    <td> 
     <span class="field-validation-valid" data-valmsg-for="employee.LastName" data-valmsg-replace="true"></span> 
    </td> 
</tr> 

Эта информация может поступать из кеша, но я не уверен.

Answer 1

Как @RoryMcCrossan сказал в своем comment выше, то, что вы ищете, является jQuery.val.

Получить текущее значение первого элемента в наборе согласованных элементов или установить значение каждого согласованного элемента.

jQuery.empty не делает то, что вы считаете нужным.

Удалить все дочерние узлы набора соответствующих элементов из DOM

Потому что вы пытаетесь изменить значение элемента, вместо удаления элементов из DOM, вы должны использовать jQuery.val.

В качестве дополнительной заметки у вас есть синтаксическая ошибка в вашем JavaScript выше. Вам не хватает закрывающей круглой скобки ) в конце списка аргументов $('#btnClear').click. Является ли это ошибкой копирования и вставки или нет, я подумал, что хочу указать на это.

Также обратите внимание, что вместо применения jQuery.val к каждому элементу, который вы хотите очистить, вы можете выбрать элементы по классу и применить jQuery.val к возвращенному объекту jQuery, который применит операцию к каждому элементу с соответствующим классом.

Вот простой пример:

$('#clear').click(function() { 
 
    $('.form-control').val(''); 
 
});

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
 

 
<input class="form-control"> 
 
<input class="form-control"> 
 
<input class="form-control"> 
 
<button id="clear">Clear</button>