CODEWITHSUNDEEP
jqueryajax
Michael
Michael

Reputation: 2284

How to call jQuery function with an onclick link?

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;      
        }

    };  
})

Upvotes: 1

Views: 10589

Answers (2)

Richard
Richard

Reputation: 4415

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

Upvotes: 3

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 2

Related Questions