How to call jQuery function with an onclick link?

Question

I'd like the user to be able to remove an item from a list without having to reload the page, and am using jQuery/AJAX to do this. However, with my current code the divs are not being removed. I think I am traversing correctly, so not sure what the problem is.

See example here: http://jsfiddle.net/BbpWc/1/

HTML:

<img src="delete.png" onclick="delete_item(<? echo $row_item['id'] ?>);">

Javascript:

$(document).ready(function() {
    delete_item=function(item_id){
        var confirmation = confirm('Are you sure you want to remove this item?');
        if (confirmation){
            $.post(
               "../../items.php?id="+item_id+"&i=delete"
            )
            $(this).parent('.item_container').remove();
        }            
        else {
            return false;      
        }

    };  
})

You should use $().click() instead of inline-handlers. And you can store the ID in a rel="" or data- attribute. — Jared Farrish
– Jared Farrish, Commented Dec 17, 2011 at 20:40

Richard · Accepted Answer · 2011-12-17 21:14:36Z

3

Have a look at this fiddle: http://jsfiddle.net/BbpWc/9/

I have:

Changed the anchors to spans
Removed ID's in the current context, you don't need to have an ID in it.
Removed onclick attribute and changed to jQuery click

edited Dec 17, 2011 at 21:14

answered Dec 17, 2011 at 20:53

Richard

4,4267 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Over a year ago

I need to pass the ID along so that I can remove that item from the database.

Richard Over a year ago

Ah, sorry, that was a little stupid of me :-) have a look at this fiddle: jsfiddle.net/BbpWc/9

denford mutseriwa Over a year ago

In my case the elements are loaded by ajax so not available in DOM so had to do this instead: $(document).on("click",".removeModel",function(e) { var confirmation = confirm("Are you sure you want to remove this job?"); if (confirmation) { $(this).closest('div.listing').hide('slow', function () { $(this).closest('div.listing').remove(); }); } else { return false; } });

David Thomas · Accepted Answer · 2011-12-17 21:01:30Z

You were missing parentheses on your call to parent(), and weren't passing in the DOM node from which you were traversing (the $(this) at the beginning of the jQuery selector), so given the updated jQuery:

$(document).ready(function() {
    delete_item = function(item_id,that) {
        var confirmation = confirm('Are you sure you want to remove this item?');
        if (confirmation) {
            //$.post("../../items.php?id=" + item_id + "&i=delete")
            $(that).parent().prev().remove();
        }
        else {
            return false;
        }

    };
});

And the HTML:

<div class="item_container">
    Item 1
</div>
<div>
    <a href="#" onclick="delete_item(1,this);">Delete 1</a>
</div>

<div class="item_container">
    Item 2
</div>
<div>
    <a href="#" onclick="delete_item(2,this);">Delete 2</a>
</div>

<div class="item_container">
    Item 3
</div>
<div>
    <a href="#" onclick="delete_item(3,this);">Delete 3</a>
</div>

It now seems to work: JS Fiddle demo.

Edited to use jQuery's click() event, instead of the intrusive in-line event handlers:

$('a').click(
    function(){
        var i = $(this).index('a') + 1;
        delete_item(i,$(this));
    });

JS Fiddle demo.

Edited to note that, sometimes, things can be a little easier than expected:

$('a').click(
    function(){
        $(this).parent().prev('div.item_container').remove().end().remove();
    });

JS Fiddle demo.

Although, admittedly, it's not as easily reusable as a function living in a library file somewhere...

Edited to in response to @roXon's comment (below) regarding the use of the andSelf() method:

$('a').click(
    function(){
        $(this).parent().prev('div.item_container').andSelf().remove();
    });

JS Fiddle demo.

Something about a variable function declared in a ready block and inline event handlers feels dirty. Also, I'm not sure that the AJAX request shouldn't use $.get() instead, since no POST variables appear to be sent. And... Shouldn't the removal of the element be done on success of the AJAX call, not before?
Probably, but without further input from the OP about what he wants I'll try to answer the explicit question to the best of my ability, if s/he wants to improve further then I'll happily explore those options. Also, ridiculously tired right now, so...yeah: I should've thought of that myself, really. And I heartily agree with mixture of in-line event handlers and variable functions...still: we've all gotta start learning somewhere =)
$(this).parent().prev('div.item_container').andSelf().remove(); (To not forget the andSelf() traversing method )
@roXon, thanks! I, uh, hadn't forgotten! Um...I was just...darn. You caught me! =) edited in!
Thanks for your help guys! I need to pass the ID along however, so that the POST can remove the correct item from the database.

Collectives™ on Stack Overflow

How to call jQuery function with an onclick link?

2 Answers 2

3 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Related