Help with removing element from list using jquery

Question

I have a list:

<ul id="links_list" class="links_list">

<li id="296" class="sidebar_link">text
    <a onclick="deleteLink(296)" href="javascript:void(0);">Delete Link</a>
</li>

<li id="297" class="sidebar_link">text2
    <a onclick="deleteLink(297)" href="javascript:void(0);">Delete Link</a>
</li>

    ... etc for a long list of items ...

</ul>

I'm currently able to remove the first element using this:

function deleteFirst() {

... do ajax stuff ..

$('ul.links_list li:first-child').fadeTo("fast", 0.01, function(){ //fade
    $(this).slideUp("fast", function() { //slide up
        $(this).remove(); //then remove from the DOM
    });

});

}

How can I modify this function to allow me to delete any item in the list?

For anyone finding this in the future please do not use the accepted answer, $("anything #id") is a tremendously inefficient selector, and doesn't address any of the issues here. An ID selector should be only $("#ID"). — Nick Craver
– Nick Craver, Commented Sep 27, 2010 at 13:23

o15a3d4l11s2 · Accepted Answer · 2010-09-27 13:04:47Z

2

Instead of $('ul.links_list li:first-child') use $('ul.links_list li#' + itemID) and pass the itemID through the delete function.

answered Sep 27, 2010 at 13:04

o15a3d4l11s2

4,0693 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Craver Over a year ago

You should never use an ID selector like that it should just be $('#' + itemID).

o15a3d4l11s2 Over a year ago

Nick Craver is right, if using IDs there is no need to be so specific with the selector.

Nick Craver · Accepted Answer · 2010-09-27 13:07:16Z

1

I would bind all the links at once instead of inline, like this:

<ul id="links_list" class="links_list">
  <li data-id="296" class="sidebar_link">text
    <a href="#">Delete Link</a>
  </li>
  <li data-id="297" class="sidebar_link">text2
    <a href="#">Delete Link</a>
  </li>
</ul>

Then script like this:

$('#links_list li a').click(function(e) {
  var id = $(this).closest("li").attr("data-id");
  //do ajax stuff
  $(this).closest("li").fadeTo("fast", 0.01).slideUp("fast", function() {
    $(this).remove();
  });
  e.preventDefault(); //prevent page scrolling with # href
});

This fixes a few issues and some improvements:

IDs can't start with a number unless you're using HTML5
Markup is much lighter (you can probably remove the classes too)
.slideUp() is a queued animation same as .fadeTo(), no need to use a callback for it
The ID is gotten relatively, no more in-line script, easier to maintain and in another file

You can test it out here.

answered Sep 27, 2010 at 13:07

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

2 Comments

Yi Jiang Over a year ago

"IDs can't start with a number unless you're using HTML5" Well yeah, but then you're using data-id, which is also HTML5, so erm... what was my point again? Never mind.

Nick Craver Over a year ago

@YiJiang - data attributes don't interfere with HTML4, where as in numeric IDs are explicitly not allowed. One is "just isn't in the spec yet" the other is specifically forbidden :)

Loïc Février · Accepted Answer · 2010-09-27 13:04:13Z

0

:nth-child Selector

See http://api.jquery.com/nth-child-selector/

For example :

$('ul.links_list li:nth-child(10)')

answered Sep 27, 2010 at 13:04

Loïc Février

7,7909 gold badges44 silver badges52 bronze badges

Comments

user113716 · Accepted Answer · 2010-09-27 13:08:17Z

0

You could change your HTML to pass a reference to the one that was clicked, then use that reference.

HTML

<li id="296" class="sidebar_link">text
    <a onclick="deleteLink(this)" href="javascript:void(0);">Delete Link</a>
</li>
<li id="297" class="sidebar_link">text2
    <a onclick="deleteLink(this)" href="javascript:void(0);">Delete Link</a>
</li>

javascript

function deleteLink( elem ) {
    $( elem.parentNode ).fadeTo("fast", 0.01, function() { //fade
        $(this).slideUp("fast", function() { //slide up
            $(this).remove(); //then remove from the DOM
        });
    });
}

answered Sep 27, 2010 at 13:08

user113716

323k64 gold badges454 silver badges441 bronze badges

Collectives™ on Stack Overflow

Help with removing element from list using jquery

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related