Question

I have this piece of code,

<div id="event" style="display:none;"> <!-- initially hidden -->
    <div class="user_event my_background">
        <%= image_tag("events_pics/boom.png", :class=> 'event_pic_small') %>
        <h6 class="event_info">Event_1: Frame: 974</h6>
        <a class="btn btn-mini btn-danger pull-right " href="#"><i class="icon-remove" onclick="remove(this)"></i></a>
    </div>
</div>

and this code in jquery:

function add_event(event){
    //ASSIGN DATA VALUES BEFORE
    $("#event_list_main").append($("#event").html());
}

Which seems to work fine. The problem is that each time I “create” a div, I want that div to be assigned a delete function. So I can delete the div itself. This is why I have onclick="remove(this)" I pass to the function the “div” itself. The problem is that the code in my remove function does not work:

function remove(arg0){
    arg0.remove();
}

this should remove the div given, but it doesnt.

Answer 1

Your onclick handler is attached to an <i> element, but you want to remove the parent div. Try something like this.

<div class="user_event">
    <i onclick="$(this).closest('.user_event').remove()">remove</i>
</div>

Using closest means it will find the parent div no matter how deeply nested the <i> is