ajax从成功视图中删除div

问题描述：

I have an ajax image uploader that I am currently trying to do a delete link for, I have the delete script working, but on success I want it to also remove the div and replace with "Image Deleted" text, but I am a little confused on how to remove a div where the id will always be different (set from a var).

$(function(){
    $(document).on('click','.trash',function(){
        var image_id= $(this).attr('id');
        $.ajax({
            type:'POST',
            url:'/includes/delete_image.php',
            data:{'image_id':image_id},
            success: function(data){
                 if(data=="YES"){
                   $('#image_id').remove()
                 }else{
                        alert("can't delete the row")
                 }
             }

            });
        });
});

That's the code, so on data=="YES" I want this:

<div id="image_id">
   <img src=\"/uploads/articles/article_images/image_name" class='imgList'><br />
BBCode: <input type="text" class="form-control" value="[img]http://www.prxa.info/uploads/articles/article_images/{$image_name}[/img]\" /><br />";
    <a href="#" id="image_id" class="trash">Delete Image</a>
</div>

To be deleted, where "image_id" will be a number set as "image_id" in the ajax code, any pointers? I am doing it horribly wrong right now heh.

"image_id" is different everytime of course.

我有一个ajax图像上传器，我正在尝试删除链接，我有删除脚本工作，但在成功的时候，我希望它也删除div code>并替换为“Image Deleted”文本，但我对如何删除 div code>所在的地方有点困惑 code> id code>总是不同的（从var设置）。 p>

  $（function（）{
 $（document）.on（'click'  ，'。trash'，function（）{
 var image_id = $（this）.attr（'id'）; 
 $ .ajax（{
 type：'POST'，
 url：'/ includes /  delete_image.php'，
 data：{'image_id'：image_id}，
 success：function（data）{
 if（data ==“YES”）{
 $（'＃image_id'）。remove（  ）
} else {
 alert（“无法删除行”）
} 
} 
 
}）; 
}）; 
}）; 
  code>   pre> 
 
 那是代码，所以 data ==“YES” code>我想要的 这个： p> 
 
 
 ＆lt; div id =“image_id”＆gt; 
＆lt; img src = \“/ uploads / articles / article_images / image_name”class ='imgList'＆gt  ;＆lt; br /＆gt; 
BBCode：＆lt; input type =“text”class =“form-control”value =“[img] http://www.prxa.info/uploads/articles/article_images/ {$ image_name  } [/ img] \“/＆gt;＆lt; br /＆gt;”; 
＆lt; a href =“＃”id =“image_id”class =“trash”＆gt;删除图片＆lt; / a＆gt; 
＆lt; /  div＆gt; 
  code>  pre> 
 
 要删除，“image_id” code>将是一个设置为“image_id”的数字 code> 在ajax代码中，任何指针？ 我现在正在做可怕的错误。 p> 
 
 
“image_id”当然每次都不同。 p> 
  div>

答

you have more than 1 element with the same id, so to get the div you could try:

$("div[id='image_id']").remove();

答

have you tried to change this:

$('#image_id').remove();

to this:

$('#'+image_id).remove();

答

Assuming the HTML div is repeating, you won't want them to all have the same id. Change this to a class of image, or something else meaningful to your css.

You do this two ways. Either set a data attribute on the div, or use the parent jquery function to get the parent div of the link you clicked.

Setting the data attribute is probably considered better practice. Add the attribute data-image-id, and then you can select the div based on that attribute's value, and then remove it.

<div data-image-id="[your image id]">

Then you can then select the div based on the attribute as explained in the jquery docs

答

use this

$("#"+image_id).remove();

instead of

$('#image_id').remove();

答

As it seems you have the image_id as a variable. So you should be able to use in your success callback.

$('#'+image_id).html('image was deleted successfully...');

You can give the id's different prefixes like

'div_' + image_id and 'img_' + image_id

相关推荐