Question

How can I remove a link from a list of links below if a link is clicked. The HTML for the links is a follows

<a href="http://www.mysite.com/page1.html" class="standard_link">link 1</a><br />
<a href="http://www.mysite.com/page2.html" class="standard_link">link 2</a><br />
<a href="http://www.mysite.com/page3.html" class="standard_link">link 3</a><br />
<a href="http://www.mysite.com/page4.html" class="standard_link">link 4</a><br />
<a href="http://www.mysite.com/page5.html" class="standard_link">link 5</a><br />

EDIT: Just realised that I need to <br /> to be removed too, so the remaining links move up. Looks weird with a gap where the link was removed.

EDIT: Here is the current script:

$(".standard_link").live('click', function(event)
{
    event.preventDefault();

    my_function($(this))
});

function my_function(link)
{
    // do some stuff first  

    // remove the clicked link plus the <br />
    link.add(link.nextSibling).remove();

    // do some other stuff
}

Answer 1

$('a.standard_link').click(function(){ // when any link with the class "standard_link" is clicked
    $(this).remove(); // remove it
});

NB that if you want to avoid the default event occuring, you’ll need event.preventDefault():

$('a.standard_link').click(function(e){ // when any link with the class "standard_link" is clicked
    e.preventDefault();
    $(this).remove(); // remove it
});

---

Edit: to remove the <br/> as well, use add:

$(this).add(this.nextSibling).remove();

Note that this will break if there is anything (including white space) between the link and the line break.