Очистка div в JQuery с использованием i.d

Question

Я пытаюсь удалить пользовательский ввод и заменить его исходным заполнителем с помощью функции empty().

Вот файл Jquery, который принимает входные данные от пользователя через <form> и добавляет его в список с template() структуры:

var template = function(text) { 
    return '<p><input type="checkbox"><i class="glyphicon glyphicon-star"></i><span>' + text + '</span><i class="glyphicon glyphicon-remove"></i></p>'; 
}; 

var main = function() { 
    $('.form').submit(function() { 
     var text = $('#todo').val(); 
     var html = template(text); 
     $('.list').append(html); 
     $('#todo').empty(); 
     return false; 
    }); 
}; 

$(document).ready(main); 

После того, как пользователь отправляет их текст и добавляются в список Я хочу 'form' input to empty, чтобы вы могли ввести новый элемент без удаления того, что вы только что набрали.

Вот фрагмент HTML-файл, который JQuery взаимодействует с:

<form class="form"> 
    <div class="form-container"> 
    <input id="todo" type="text" class="form-input" placeholder="Add item"> 
    </div> 
    <button type="submit" class="btn">+</button> 
</form> 

Почему линия

$('#todo').empty(); 

не вынимая ввод пользователя и вернуть его к первоначальному заполнителем?

Answer 1

Пустой метод не удаляет атрибуты или значения, но удаляет html внутри элемента.Вы должны использовать val:

$('#todo').val('');//To empty the value 

Если вы хотите удалить заполнитель слишком используйте removeAttr метод:

$('#todo').removeAttr('placeholder'); 

Answer 2

Попробуйте это:

$('form').trigger("reset"); 

Это самый элегантный и правильный путь, так как он будет работать, если у вас есть несколько и другой тип входа без необходимости делать какие-либо изменения. Гораздо лучше, чем пытаться очистить и сбросить места на всех полях. Это позволит установить поля в исходное состояние (с установленными заполнителями).

На основе вашего кода вы можете сделать:

$('.form').submit(function() { 
    // ... 
    $(this).trigger("reset"); 
    // ... 
}); 

Смотреть это работает на примере форме, основанной на вашем с более полей input с и selecthere.

См JQuery сброса Doc здесь: JQuery API Doc/reset

Answer 3

.empty() для других случаев использования. От docs ...

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

Вместо этого вы можете .val('')<input />. Обратите внимание на следующий упрощенный пример ...

$('.form').submit(function() { 
    $('#todo').val(''); 
    return false; 
}); 

JSFiddle Link - демонстрационная

---

как наблюдение вашему соседнему код, который вы также можете передать event и вызвать .preventDefault() вместо return false;. В качестве альтернативы вы можете позвонить reset() в свой функциональный блок следующим образом: this.reset() - reset demo с предотвращением по умолчанию.