Удалите динамически добавленный текст метки при вводе значения

Question

Я добавил весь текст метки в тест div #, если значение ввода пустое и хотел бы, чтобы удалил его, когда пользователь вводит / выбирает значения в текстовом поле / раскрывающемся меню .

<div id="test">
</div>

$('input, select').each(function(){
    var $element = $(this)

    if ($element.val() == '') {
        var $label = $("label[for='"+this.id+"']");
        $("#test").append($label.text());
    }

}); 

Примечание: добавлен только соответствующий код, так как форма большая.

Answer 1

Я не совсем уверен, что это то, что вы хотите. Если я понял ваш вопрос, вы хотите удалить метки, имеющие значение в поле ввода, из кода #test div.

HTML:

<label for="input_1">Label</label><br />
<input type="text" name="input_1"/><br />
<label for="input_2">Label2</label><br />
<input type="text" name="input_2" />

Javascript код:

function addEmptyToDiv() {
    $('input, select').each(function(){
        var $element = $(this)

        if ($element.val() == '') {
          var $label = $("label[for='"+this.name+"']");
          $("#test").append($label.text());
        }
    }); 
}
addEmptyToDiv();


$('input, select').on("change paste keyup blur", function() {
    // Remove everything from the #test div
    $("#test").empty();
    addEmptyToDiv();

});

Рабочая скрипка: https://jsfiddle.net/6csyoL24/