Hide last two items in a div

user_4866624 0
Viewed 1022

I have the following code , in which I want to hide last two items in a div :

$('.toggleRoom').click(function() {
  $('.showRooms').slice(-2).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

But its not working, The last two divs are not removing.

What am I missing ?

html jquery javascript
10 Answers

You need to hide the children of your selected div:

var children = $('.showRooms').children();

$('.toggleRoom').click(function() {
  // hide last 2
  children.show().slice(-2).hide();

  // or use remove if you want them removing instead of hiding:
  // children.slice(-2).remove();
});

$('.toggleRoom-1').click(function() {
  // hide all but last 2
  children.show().slice(0, -2).hide();

  // or use remove if you want them removing instead of hiding:
  // children.slice(0, -2).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="toggleRoom">click to hide last 2</div>

<div class="toggleRoom-1">click to hide all but last 2</div>

user_17909820

You need to do $('.showRooms').find('div').slice(-2).remove() as there are three divs inside the div with class showRooms so you need to select the last two div using slice(-2).

$('.toggleRoom').click(function() {
  $('.showRooms').find('div').slice(-2).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
<button class='toggleRoom'>Click</button>

Based on your comment to remove all div except last two divs you need to do:

$('.toggleRoom').click(function() {
  var elem = $('.showRooms').find('div');
  elem.slice(0, elem.length-2).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>
<button class='toggleRoom'>Click</button>

user_70531900

If your html is exactly like your above code, you can try this:

$(".showRooms div:not(:first-child)");

else try one of this functions! Simple and short:

function GetExpectFirstDivs(c/*count 4 ignore from first*/){
    return $(".showRooms>div:nth-child(n+"+(c+1)+")");
}
function GetExpectLastDivs(c){
    return $(".showRooms>div:nth-last-child(n+"+(c+1)+")");
}
function GetFirstDivs(c/*count*/){
    return !c?$():$(".showRooms>div:not(:gt("+(c-1)+"))");
}
function GetLastDivs(c){
    return !c?$():$(".showRooms>div:gt(-"+(c+1)+")");
}

Now, for example: how can we remove all except last two (n) divs?:

GetExpectLastDivs(2/*n*/).remove();
user_98812490

you have to use selector on its children not on the div it selef

like .showRooms > div (direct div children) or .showRooms div (all div children)

$('.toggleRoom').click(function() {
    $('.showRooms > div').slice(-2).toggle();
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggleRoom">toggle rooms</button>

<div class="showRooms">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

To hide other exept the two use .not()

see below snippet 

$('.toggleRoom').click(function() {
    var $lastTwo = $('.showRooms > div').slice(-2);
    $('.showRooms > div').not($lastTwo).toggle();
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggleRoom">toggle rooms</button>

<div class="showRooms">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

user_29324760

For same HTML code, you need to change in Js The only issue is you have forgotten to add child element type 

 $('.toggleRoom').click(function() {
        $('.showRooms > div').slice(-2).remove();
    });

another method is 

$(".showRooms div:not (:first-child)");
user_95167840

This is what you are missing:

$('.toggleRoom').click(function() {
    $('.showRooms').children().slice(-2).remove();
});
user_78276830

You just need to change below JS

$('.toggleRoom').click(function() {
   $('.showRooms div').slice(-2).remove();
});
user_99821840

You are missing the div selector,add it.

  $('.showRooms div').slice(-2).remove();

If you want to be more specific you can use direct child selector.

  $('.showRooms > div').slice(-2).remove();

one more selector :

$('.showRooms div:last-child').prev('div').andSelf().remove();


$('.toggleRoom').click(function() {
  $('.showRooms div').slice(-2).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

If you wish to remove all except last two you can do this.

 $('.showRooms div').slice(-2).addClass('preserve');
$('.showRooms div:not(.preserve)').remove();
$('.showRooms div).removeClass('preserve');

This is once way you can do it.

user_28016890

If all you want to do is hide the last two item - you can do it with just css

.showRooms div:nth-last-of-type(1),
.showRooms div:nth-last-of-type(2) {
  display:none;
}
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

if you want to show only the last two - then flip the css around to hide all divs then show only the last two:

.showRooms div {display: none;
}

.showRooms div:nth-last-of-type(1),
.showRooms div:nth-last-of-type(2) {
  display:block;
}
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

user_58675720

I would suggest to use :gt() Selector:

$('.showRooms > div:gt(-3)').hide(); // hide last 2 items


$('.toggleRoom').on('click', function(e) {
    $('.showRooms > div:gt(-3)').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="toggleRoom">click to hide last 2</button>

<div class="showRooms">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

user_38805850
Related