Delete Clicked Item In Jquery And Php?

I just have a quick question how do I delete the item I just clicked? I don't have a great way of tracking it and I'm at my last resort way right now (which is what I'm posting) wh

Solution 1:

There were still a few issues in your updated code. I've made some changes, and pasted in the code below. I've changed the method to $.post(), so your PHP file will need to access the parameter as $_POST['filename'].

A couple issues I noticed, you had more than one element with the same id attribute. I removed the redundant data-filename attributes from elements that didn't need them. I placed your jQuery inside a $(document).ready() in order to make sure that nothing was called until all DOM elements had been loaded. I also used the .on method for binding the event...just in case you ever dynamically add more li elements with the a.image-list element. This way you are binding the event to an element that will always be there, and catching it on the a.image-list. (I might be explaining that incorrectly...it's late).

Hope this helps.

<ulclass="image-list"><?php$count = 1;
    if ($hotelId) {
        foreach(glob($hotelDir) as$filename=>$hotelvalue){
            echo'<li id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a class="btn btn-mini btn-primary image-list" style="width: 18px;margin-top: -35px;position: relative\9;top: -25px\9;border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;margin-left:330px;" title="Delete" data-filename="' . basename($hotelvalue) . '" ><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "\n" . "<br>";
            $count++;
         }
    }
?></ul><script>
    $(document).ready(function(){
        $("ul.image-list").on("click", "li.image-list a.image-list", function () {
            var _clicked = $(this);
            var _filename = _clicked.attr('data-filename');
            _clicked.parents("li.image-list").fadeOut(function(){
                $(this).empty().remove();
            });
            $.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) {
                // it succeeded
            }).fail( function (error){
                // it failed
            });
        }); 
    })  
</script>

UPDATE: I had a typo in my code...not sure you caught it.

var _filename = clicked.attr('data-filename');

SHOULD BE...

var _filename = _clicked.attr('data-filename');

My apologies.

To see if you are hitting your PHP file, you can do something simple like this...

<?php$data["response"] = $_POST['filename'];
    echo json_encode($data);
?>

And then modify your .done method to look like this...

$.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) {
     // it succeededconsole.log(data);
}).fail( function (error){
     // it failed
});

Solution 2:

You can delete or remove a DOM element with jQuery using a syntax similar to this and pull the value passed in your item:

$('div.image-list li a.image-list').click( function () {
    var filename = $(this).attr('data-filename');
    $(this).parents('li').remove();
});

You will have pass the data to the PHP file like you are doing but with the filename in the url:

$.get('assets/php/deletefile.php?filename=' + filename).done( function() {
    // it succeeded
}).fail( function (){
    // it failed
});

When you load the page you will have to load in the data-filename="filename.jpg" into the element you clicked.

In your deletefile.php, you can use $_GET['filename'] to get the filename.