Removing elements with a little bit of logic

Question

On a closing event, I would like to do the following:

• If there is only 1 input field: Do nothing

• If there are more than 1 input fields and the value of none of them is empty: Do nothing

• If there are more than 1 input fields and there is at least one field that has a value: Remove all other fields which do not have any values

• If there are more than one input fields and none of them has a value: Delete all input fields except the first one

This is what I have so far:

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

This script will remove all input fields which have no values but that's not exactly what I want?!

Answer 1

Get all empty input fields using filter() method and compare the size of both empty and original array to remove element. Where use slice() method to get all element except the first.

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

You can find out the length of the empty and non empty input elements and compare the length with the total length of inputs.

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

}

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

Answer 3

please check this code , i have add this code for load function so you can change as like you want

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

and you can use this simple code for your issue

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

i think it will work

Answer 4

Basically you just want to compare the empty length to all the inputs.

$(".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

});

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

So applying the answer to your code:

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