单独删除输入

时间:2013-03-20 06:23:50

标签: javascript jquery validation input

我希望在其名称中添加编号输入(已经成功完成),但如果为空(无法),也可以通过单击按钮将其删除。使用此代码,将删除所有搜索类输入。我只想要删除空的。这是我的尝试:

<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> 

谢谢!

2 个答案:

答案 0 :(得分: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()
            }
        });    
    });
})

演示:Fiddle

答案 1 :(得分:0)

您可以在调用.remove()之前从jQuery对象中过滤掉非空的(因此只删除空的):

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

如果.filter()回调返回true,则会保留该项目。如果它返回false,则从生成的jQuery对象中删除该值。因此,这从所有.search个对象开始,然后仅保留!this.valuetrue的那些对象,这意味着它保留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();
});