Question

在闭幕活动中，我想做以下事情：

如果只有1个输入栏：什么都不做
如果有多个输入字段且其中任何一个的值都为空：什么都不做
如果有多个输入字段并且至少有一个字段具有值：删除所有其他没有任何值的字段
如果有多个输入字段但没有一个具有值：删除除第一个以外的所有输入字段

这是我到目前为止所做的：

$(document).on('closing', '#sidebar', function (e) {
    if ($('#sidebar input').size() > 1) {
        $('#sidebar input').each(function(i){
            if ($(this).val() == '') {
                $(this).remove();
            }
        })
    }
});

此脚本将删除所有没有值但不完全符合我要求的输入字段？！

Answer 1

使用filter()方法获取所有空输入字段，并比较空数组和原始数组的大小以删除元素。使用slice()方法获取除第一个之外的所有元素。

$(document).on('closing', '#sidebar', function(e) {
  // cache all inputs
  var $inputs = $('#sidebar input');

  // check inputs count is greater than 1
  if ($inputs.length > 1) {
    // filter out empty iput fields
    $empty = $inputs.filter(function(i) {
      return this.value == '';
    });
    // check all input fileds are empty
    if ($empty.length == $inputs.length)
    // if all are emty get input element except 
    // first and remove
      $empty.slice(1).remove();
    // else remove all empty inputs
    else
      $empty.remove();
  }
});

$('.x').each(function() {
  var $inputs = $('input', this);
  if ($inputs.length > 1) {
    $empty = $inputs.filter(function(i) {
      return this.value == '';
    });
    if ($empty.length == $inputs.length)
      $empty.slice(1).remove();
    else
      $empty.remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>All empty</h3>
<div class="x">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
</div>

<h3>Some empty</h3>
<div class="x">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="3">
  <input type="text" value="">
  <input type="text" value="5">
</div>

<h3>None empty</h3>
<div class="x">
  <input type="text" value="1">
  <input type="text" value="2">
  <input type="text" value="3">
  <input type="text" value="4">
  <input type="text" value="5">
</div>
<h3>Single</h3>
<div class="x">
  <input type="text" value="">
</div>

Answer 2

基本上你只想比较空的长度和所有的输入。

＆＃13;

$(".x").each(function() {
  var wrapper = $(this),  //element that holds the inputs
    allInputs = wrapper.find("input"),  //get all inputs
    emptyInputs = allInputs.filter(function() {  //filter out the empty inputs
      return !this.value.length  //if there is no length it is false so we make false true
    });

  if (allInputs.length === emptyInputs.length) {  //if lengths are equal, remove the first one
    emptyInputs = emptyInputs.slice(1);
  }
  emptyInputs.remove();  //remove the empty elements

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>All empty</h3>
<div class="x">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
</div>

<h3>Some empty</h3>
<div class="x">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="3">
  <input type="text" value="">
  <input type="text" value="5">
</div>

<h3>None empty</h3>
<div class="x">
  <input type="text" value="1">
  <input type="text" value="2">
  <input type="text" value="3">
  <input type="text" value="4">
  <input type="text" value="5">
</div>

＆＃13;

所以应用代码的答案：

$(document).on('closing', '#sidebar', function (e) {
  var wrapper = $(this),  //element that holds the inputs
    allInputs = wrapper.find("input"),  //get all inputs
    emptyInputs = allInputs.filter(function() {  //filter out the empty inputs
      return !this.value.length  //if there is no length it is false so we make false true
    });

  if (allInputs.length === emptyInputs.length) {  //if lengths are equal, remove the first one
    emptyInputs = emptyInputs.slice(1);
  }
  emptyInputs.remove();  //remove the empty elements
});

Answer 3

请检查此代码，我已为加载功能添加此代码，以便您可以按照您想要的方式进行更改

 $(function () {
    if ($('#sidebar input').length > 1) {
        var j = 0;
        $('#sidebar input').each(function (i) {
            if ($(this).val() == '') {
                $(this).remove();
            } else if (j == 0) {
                j = 1;
            }
            else {
                $(this).remove();
            }
        })
    }
});

您可以将此简单代码用于您的问题

 $(document).on('closing', '#sidebar', function(e) {
    if ($('#sidebar input').length > 1) {
        var j = 0;
        $('#sidebar input').each(function (i) {
            if ($(this).val() == '') {
                $(this).remove();
            } else if (j == 0) {
                j = 1;
            }
            else {
                $(this).remove();
            }
        })
    }
});

我认为它会起作用

Answer 4

您可以找出空和非空输入元素的长度，并将长度与输入的总长度进行比较。

＆＃13;

var inputList = $("#sidebar input");

if (inputList.length > 1) {

  var notEmpty = inputList.filter(function(elem) {
    return $(this).val() !== ""
  });
  
  var empty = inputList.filter(function(elem) {
    return $(this).val() === ""
  });

  if (notEmpty.length > 0 && inputList.length != notEmpty.length) {
  
    $(empty).remove();
    
  }
  else if(notEmpty.length == 0){
    
    inputList.not(":first").remove();
    
  }
    

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
  <input type="text" value="">
  <input type="text" value="">
  <input type="text" value="">
</div>

＆＃13;

删除具有一点逻辑

4 个答案: