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 编写如下

$(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 回答
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 回答