I'm trying to remove an element and the element immediately after it. Any idea why this isn't working?:

$('ul').find('li').first().remove().next().remove();

$('ul').find('li').first().remove().next().remove();

<script src=".1.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

I'm trying to remove an element and the element immediately after it. Any idea why this isn't working?:

$('ul').find('li').first().remove().next().remove();

$('ul').find('li').first().remove().next().remove();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

This is just an example of hwat I'm trying to do in my project. I need to use the find method, can't change that part. Thanks

• javascript
• jquery
• html

7 Answers 7

You can try selecting the first two, then remove them:

$('ul').find('li').slice(0, 2).remove();

It doesn't work because the first one is removed so next() won't work.

Try:

$('ul').children().slice(0,2).remove();

You trying to select next element of removed element. The :lt() selector, select element at an index less than written index.

$('ul').find('li:lt(2)').remove();

$('ul li:lt(2)').remove();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The first element is removed, so the next() function gets an empty collection and nothing happens.

Correct way:

var $deleteMe1 = $('ul').find('li').first();
var $deleteMe2 = $deleteMe1.next();
$($deleteMe1).add($deleteMe2).remove();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

In your specific case, elclanrs' solution is the way to go.

In the general case of wanting to remove the next element even if it doesn't match the initial selector, you can use add and next:

var toRemove = $("selector for the matching thing");
toRemove.add(toRemove.next()).remove();

setTimeout(function() {
  var toRemove = $('.m');
  toRemove.add(toRemove.next()).remove();
}, 1500);

<div>I don't match, so I'll stay</div>
<div class="m">I match, so I'll go</div>
<span>I'm the next element after the match, so I'll go to</span>
<div>I'm unrelated, so I'll stay</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You have to remove first and next at the same time.

So use:

 $('ul li:eq(0), ul li:eq(1)').remove(); 

you could use addBack()

$('ul').find('li').first().next().addBack().remove()

in terms of lis this doesn't make much sense, since it's just an overplicated way to say take the first two lis. But if we would talk about arbitary nodes, imo this would be the simplest way to select "this node + the next one", and remove them