Question

When I click the class “red” I want to delete this entire div. My JS is

$('document').ready(function(){
    $('.buttons .red').click(function(){
        $(this).parent('div').parent('div').remove();
        $(this).parent('div').remove();
    });
});

Here is my HTML

<div data-role="collapsible" data-collapsed="false">
    <h3> Keep</h3>
    <div id= "container">
        <a href="categories.html" class="green" data-transition="slide"  data-type="horizontal" data-role="button">Tax Deductible</a>
        <a href="#" class="red" data-transition="slide"  data-type="horizontal" data-role="button">Tax Deductible</a>
        <a href="categories.html" class="blue" data-transition="slide"  data-type="horizontal" data-role="button">Tax Deductible</a>
    </div>
</div>

Answer 1

I’d suggest:

$('a[data-role="button"].red').click(
    function(e){
        e.preventDefault();
        $(this).closest('div[data-role]').remove();
    });

JS Fiddle demo.

This attaches the click event to an a element who has the data-role attribute with the value of button, and also the class of red.

The default behaviour of the click event is prevented (to prevent hashChange, or page-jumping/loading), the selector moves up the DOM from the a element to the first ancestor element with the data-role attribute set and removes that element.

The use of closest() means you can nest the a element inside of other elements (within the same ancestor), and the function will still work (whereas with parent().parent()... you’d have to rewrite the jQuery selector every time an ancestor was inserted/removed.

References:

• attribute-equals [attribute="value"] selector.
• closest().
• event.preventDefault().
• remove().