Question

How do I remove a link’s containing div(and all the other elements inside) when the link is clicked?

<div class="container">
    <div class="inner-container">Content</div>
    <a class="remove-outer" href="">Link</a>
</div>

<div class="container">
    <div class="inner-container">Content</div>
    <a class="remove-outer" href="">Link</a>
</div>

<div class="container">
    <div class="inner-container">Content</div>
    <a class="remove-outer" href="">Link</a>
</div>

There are three div containers with the same class. How would I make it so when the user clicks on the link, it removes everything from the container inwards? So, if one of the links above is clicked, it would yield this:

<div class="container">
    <div class="inner-container">Content</div>
    <a class="remove-outer" href="">Link</a>
</div>

<div class="container">
    <div class="inner-container">Content</div>
    <a class="remove-outer" href="">Link</a>
</div>

I am pretty new. I only know how to remove elements with a unique id. I cannot apply that knowledge here since if the user clicks on one of the links, all of the containers will go away.

Answer 1

This should do it.

$(function(){
    $("a.remove-outer").click(function(){
        $(this).parent().remove();
    });
});

EDIT: Use live if functionality is needed for newly added elements too.

$(function(){
    $("a.remove-outer").live("click", function(){
        $(this).parent().remove();
    });
});