Question: I have a list of images in a slider like so:

```
<ul>
    <li class="dd">one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

```

There is a button to delete the `<li>` with the class "dd", so I have this function going on:

```
function delete(){
    $('li.dd').remove();
}

```

So now that that particulat `<li>` is deleted, I want the class "dd" to be added to either the `<li>` I am currently on. I tried adding this:

```
function delete(){
    $('li.dd').remove();
    $('li').addClass(' dd')
}

```

but as you can see, all it does is add the class to all existing `<li>`s, meaning if I choose to click the delete button again, the entire list is deleted.

I have a pen going on of exactly what I have:

<http://codepen.io/anon/pen/gpNwGp>

Thank you in advance!

Answer: 
Because you're adding class to all the elements, all the `li`s will be removed on next click. You can add the class to only **first** `li` using following methods.

You can use `:first` pseudo-selector to select first element.

```
function delete() {
    $('li.dd').remove();
    $('li:first').addClass('dd');
    //   ^^^^^^
}

```

You can also use `first()` to get first element

```
function delete() {
    $('li.dd').remove();
    $('li').first().addClass('dd');
    //     ^^^^^^^^
}

```

You can check updated codepen [**Demo**](http://codepen.io/anon/pen/EjBgoe).
save the next element first to add you class:

```
function delete(which) {
    var next_li = $('li.dd').next();
    $('li.dd').remove();
    next_li.addClass("dd");
}

```

i think this might helps you.

good luck.

remember ! do not use `.first()` because it gives the first li `dd` class. not the one that is in line.