删除jQuery和PHP中的单击项？

Question

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) which deletes everything in the list.

PHP/HTML/jQuery:

<div class="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;" id="del'.$count.'" value="Delete"><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "
" . "<br>";
                                $count++;
                            }
                        }else{}
                        ?>
                    </div>
                    </div>
                    <script>
                    $('div.image-list li a.image-list').live('click', function() { 
                        bootbox.confirm("Are you sure you want to delete this image?", "Cancel", "Confirm", function(result) {
                            if (result) {
                                $('ul.image-list li a.image-list').closest('li').fadeOut(); 
                                $.post('assets/php/deletefile.php');
                            }
                        }); 
                    });
                    </script>

Here is the delete information (right now it is static PHP that only deletes the first file I don't have another way of doing this yet):

<?php 
session_start();
$files = glob("upload/" . $_SESSION['curHotelId'] . "/" . '*.*');

if(is_file($files[0]))
    @unlink($files[0]);

?>

UPDATE:

Thanks to Karl's answer I got a better idea of what I'm doing, but I still cannot get these to remove. I don't know why. They stay blank and act as if they don't even exist or the button does not work.

Here is my updated PHP/HTML/jQuery:

<div class="image-list">
                                <?php
                                $count = 1;
                                if ($hotelId) {
                                    foreach(glob($hotelDir) as $filename=>$hotelvalue){
                                        echo '<li data-filename="' . basename($hotelvalue) . '" id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain"  data-filename="' . basename($hotelvalue) . '" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a data-filename="' . basename($hotelvalue) . '" 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;" id="del'.$count.'" value="Delete"><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "
" . "<br>";
                                        $count++;
                                    }
                                }else{}
                                ?>
                            </div>
                            </div>
                            <script>
                            $('li.image-list a.image-list').click( function () {
                                        var filename = $(this).attr('data-filename');
                                        $(this).remove();
                                        $.get('assets/php/deletefile.php?filename=' + filename).done( function() {
                                            // it succeeded
                                        }).fail( function (){
                                            // it failed
                                        });
                                }); 
                            });
                            </script>

And the PHP was updated too:

<?php 
session_start();
$filename = $_get['filename'];
$files = glob("upload/" . $_SESSION['curHotelId'] . "/" . $filename);

if(is_file($files))
    @unlink($files);

?>

HOPEFULLY FINAL UPDATE:

I'm so close, I just wanna throw everything I love out a window. So here is where I'm having an issue. It isn't deleting the images when the code executes so here is PHP:

ALL OF THIS CODE WORKS. C: Thank you everyone that helped!

<?php 
session_start();
$file = $_POST['filename'];
$selHotelId = $_SESSION['curHotelId'];
$files = "upload/" . $selHotelId . "/" . $file;
unlink($files);
?>

jQuery:

$(document).ready(function(){
                                $("#imageClick").live("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) {
                                        bootbox.alert('File has been deleted!');
                                    }).fail( function (error){
                                       bootbox.alert('There has been an error. Contact admin.');
                                    });
                                }); 
                            }); 

Answer 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.

<ul class="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>' . "
" . "<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 succeeded
     console.log(data);
}).fail( function (error){
     // it failed
});