删除jQuery和PHP中点击的项目？ [英] Delete clicked item in jQuery and PHP?
问题描述
我只是有一个简单的问题，我如何删除刚才点击的项目？我没有一个很好的跟踪方式，我现在正在以最后的方式（这是我发布的内容）删除列表中的所有内容。
PHP / HTML / jQuery：
< div class = 图像列表>
<？php
$ count = 1;
if（$ hotelId）{
foreach（glob（$ hotelDir）as $ filename => $ hotelvalue）{
echo'< li id =del'。$ count。' class =image-list>< a class =enlargeUserhref ='。$ hotelvalue。'>< img class =imageListMainsrc ='。$ hotelvalue。'width = 50pxheight =50px/>< p class =filename>'。 basename（$ hotelvalue）。 < / P>< / A> < a class =btn btn-mini btn-primary image-liststyle =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-2style =margin-left：-3px;>< / i> ;< / a>< / li>'。 \\\
。 <峰; br> 中;
$ count ++;
}
} else {}
？>
< / div>
< / div>
< script>
$（'div.image-list li a.image-list'）。live（'click'，function（）{
bootbox.confirm（您确定要删除此图片吗？ ，Cancel，Confirm，function（result）{
if（result）{
$（'ul.image-list li a.image-list'）。closest（'li' ）.fadeOut（）;
$ .post（'assets / php / deletefile.php'）;
}
}）;
}）;
< / script>
以下是删除信息（现在它是静态PHP，它只删除第一个文件，还有另一种方法做到这一点）：
<？php
session_start（）;
$ files = glob（upload /。$ _SESSION ['curHotelId']。/。'*。*'）;
if（is_file（$ files [0]））
@unlink（$ files [0]）;
？>
更新：
感谢卡尔的回答我对自己正在做的事情有了更好的了解，但我仍然无法将其清除。我不知道为什么。它们保持空白，就好像它们不存在或按钮不起作用。
这是我更新的PHP / HTML / jQuery：
< div class =image-list>
<？php
$ count = 1;
if（$ hotelId）{
foreach（glob（$ hotelDir）as $ filename => $ hotelvalue）{
echo'< li data-filename =''。basename（$酒店价值）。id =del'。$ count。'class =image-list>< a class =enlargeUserhref ='。$ hotelvalue。'>< img class = imageListMaindata-filename ='。basename（$ hotelvalue）。'src ='。$ hotelvalue。'width =50pxheight =50px/>< p class =filename> ;'。 basename（$ hotelvalue）。 < / P>< / A> < a data-filename ='。basename（$ hotelvalue）。'class =btn btn-mini btn-primary image-liststyle =width：18px; margin-top：-35px; position：relative \\ \\; top：-25px \9; border-radius：100％; - moz-border-radius：100％; - o-border-radius：100％; - webkit-border-radius：100％左：330px; id =del。$ count。'value =Delete>< i class =icon-remove-circle icon-2style =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>
并且PHP也进行了更新：
<？php
session_start（）;
$ filename = $ _get ['filename'];
$ files = glob（upload /。$ _SESSION ['curHotelId']。/。$ filename）;
if（is_file（$ files））
@unlink（$ files）;
？>
HOPEFULLY FINAL UPDATE：
如此接近，我只想扔掉一切，我爱一个窗口。所以这里是我遇到问题的地方。它不会在代码执行时删除图像，因此这里是PHP：
所有这些代码都可以使用。 C：谢谢大家的帮助！
<？php
session_start（）;
$ file = $ _POST ['filename'];
$ selHotelId = $ _SESSION ['curHotelId'];
$ files =upload /。 $ selHotelId。 /。 $文件;
unlink（$ files）;
？>
jQuery：
< $ c $> $（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函数（）{
$（this）.empty（）。remove（）;
}）;
$ .post（'assets / php / deletefile.php'，{filename：_filename }）。done（function（data）{
bootbox.alert（'File has been deleted！'）;
}）。fail（function（error）{
bootbox.alert（'有错误，请联系admin。'）;
}）;
}）;
}）;
您的更新代码中仍然存在一些问题。我做了一些更改，并粘贴下面的代码。我已经将方法更改为 $。post（），因此您的PHP文件需要以 $ _ POST ['filename']的形式访问参数。
我注意到一对夫妇的问题，您有多个具有相同 id 属性。我从不需要它们的元素中删除了多余的 data-filename 属性。我把你的jQuery放在一个 $（document）.ready（）中，以确保没有任何东西被调用，直到所有的DOM元素都被加载完毕。我还使用 .on 方法来绑定事件...以防万一您动态添加更多 li 元素与 a.image-list 元素。通过这种方式，您可以将事件绑定到始终存在的元素，并将其捕获到 a.image-list 上。 （我可能会错误地解释它......已经晚了）。
希望这有助于您。
< 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 =enlargeUserhref ='。$ hotelvalue。'>< img class =imageListMainsrc ='。$ hotelvalue。'width = 50pxheight =50px/>< p class =filename>'。 basename（$ hotelvalue）。 < / P>< / A> < a class =btn btn-mini btn-primary image-liststyle =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 =Deletedata-filename ='。basename（$ hotelvalue）。'>< i class =icon-remove-circle icon-2style =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>
更新：我的代码有错字...不确定你抓住了它。
var _filename = clicked.attr（'data-filename'）;
应该...
var _filename = _clicked.attr（'data-文件名'）;
我的歉意。
要查看您是否正在击中你的PHP文件，你可以做这样简单的事情...
<？php
$ data [响应] = $ _POST ['文件名'];
echo json_encode（$ data）;
？>
然后修改 .done 方法为看起来像这样...
$。post（'assets / php / deletefile.php'，{filename：_filename}） .done（函数（数据）{
//成功
console.log（data）;
}）。fail（函数（错误）{
//失败
}）;
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>' . "\n" . "<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>' . "\n" . "<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.');
});
});
});
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>' . "\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 succeeded
console.log(data);
}).fail( function (error){
// it failed
});
这篇关于删除jQuery和PHP中点击的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
