javascript - Hide last two items in a div - Stack Overflow

admin管理员组

文章数量:1302428

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=".1.1/jquery.min.js"></script>
<div class="showRooms">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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./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 ?

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 4, 2018 at 10:56 Bourbia Brahim 14.7k44 gold badges4343 silver badges5454 bronze badges asked Sep 4, 2018 at 10:49 GammerGammer 5,6282020 gold badges8282 silver badges132132 bronze badges 2

• 3 $('.showRooms > div').slice(-2).remove(); – Yusuf Commented Sep 4, 2018 at 10:52
• I've updated my response. you can look at my another methods :) – Hassan Sadeghi Commented Sep 4, 2018 at 11:30

Add a ment  | 

10 Answers 10

Sorted by: Reset to default 5

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

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./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 ment 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./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>

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

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

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

This is what you are missing:

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

You just need to change below JS

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

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>

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

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

本文标签： javascriptHide last two items in a divStack Overflow