Remove div "Father"

-2

I have my following code:

    <div class="row">
        <div class="col-md-10">
            CONTEUDO 1
        </div>
        <div class="col-md-2">
            <a href="#" class="btn btn-primary">Delete</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            CONTEUDO 2
        </div>
        <div class="col-md-2">
            <a href="#" class="btn btn-primary">Delete</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            CONTEUDO 3
        </div>
        <div class="col-md-2">
            <a href="#" class="btn btn-primary">Delete</a>
        </div>
    </div>

And when I click on "Delete" it has to delete the entire div (which contains the class "row") of its respective content.

How could you do this?

    
asked by anonymous 13.01.2015 / 21:12

1 answer

4

You can do this

$(function(){
    $('a.delete').click(function(){ 
        $(this).closest('.row').remove();
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row">
        <div class="col-md-10">
            CONTEUDO 1
        </div>
        <div class="col-md-2">
            <a href="#" class="btn btn-primary delete">Delete</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            CONTEUDO 2
        </div>
        <div class="col-md-2">
            <a href="#" class="btn btn-primary delete">Delete</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10">
            CONTEUDO 3
        </div>
        <div class="col-md-2">
            <a href="#" class="btn btn-primary delete">Delete</a>
        </div>
    </div>

The function closest() returns the first element that corresponds to the specified selector, starting the search of the current element and going up to find it.

    
13.01.2015 / 21:19