0

名前に番号付きの入力を追加したい（すでに成功しています）が、空の場合はボタンをクリックしてそれらを消去します（できませんでした）。このコードでは、すべての検索クラスの入力が消去されます。空のものだけを削除したい。これが私の試みです：

<script type="text/javascript">
// contains the counter for elements added
window.__buttonClickCounter = 1;

// Keep reference to container
var c = document.getElementById('inputs');

// Click handler that appends to the contents of the container
var clickhandler = function () {
    c.innerHTML = c.innerHTML + "<input class='search' style='margin-bottom:4px;' type='search'         name='word" + window.__buttonClickCounter + "'/>";
    window.__buttonClickCounter++;

    $('#removebtn').click(function () {
        $('.search').remove();
    });
}
</script>

ありがとう！

4

2 に答える 2

0

次のように呼び出す前に、jQueryオブジェクトから空でないもの.remove()を除外できます（したがって、空のもののみを削除します）。

$('#removebtn').click(function () {
     $('.search').filter(function() {return !this.value}).remove();
});

.filter()コールバックが戻った場合true、アイテムは保持されます。を返す場合false、値は結果のjQueryオブジェクトから削除されます。したがって、これはすべての.searchオブジェクトから始まり、それから、であるものだけを保持!this.valueします。つまり、偽の（たとえば空の）オブジェクトだけを保持するので、空のオブジェクトだけがtrue呼び出されます。this.value.remove()

または、もう少し再利用可能な方法：

// Reusable jQuery method for filtering out non-empty input values
// Also filters out items that don't have a `.value` property
$.fn.filterNonEmpty = function() {
    return this.filter((function() {return !this.value});
};

// now use this new jQuery method
$('#removebtn').click(function () {
    $('.search').filterNonEmpty().remove();
});
于 2013-03-20T06:41:53.630 に答える
0

次のようにjqueryを使用して記述できます

$(function(){
    var counter = 0;
    $('#addbtn').click(function(){
        $('#inputs').append('<input class="search" style="margin-bottom:4px;" type="search"         name="' + counter++ + '"/>')
    });

    $('#removebtn').click(function(){
        $('.search').each(function(){
            var $this = $(this);
            if(!$this.val()){
                $this.remove()
            }
        });    
    });
})

デモ:フィドル

于 2013-03-20T06:28:23.820 に答える