Question

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

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

谢谢！

Answer 1

您可以使用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

Answer 2

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

$('#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();
});

单独删除输入

2 个答案: