Reza
Reza

Reputation: 523

Removing elements with a little bit of logic

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

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

Upvotes: 2

Views: 112

Answers (4)

Pranav C Balan
Pranav C Balan

Reputation: 115282

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>

Upvotes: 1

Deep
Deep

Reputation: 9804

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>

Upvotes: 0

Shafiqul Islam
Shafiqul Islam

Reputation: 5690

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

Upvotes: 0

epascarello
epascarello

Reputation: 207557

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

Upvotes: 1

Related Questions