Reputation: 523
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?!
Upvotes: 2
Views: 112
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
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
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
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