如何在onclick上删除预览的图像

时间:2016-11-03 14:41:21

标签: javascript php jquery

我有一系列图片,例如{A:[img1,img2], B:[img1]}

我想在单击删除按钮时删除任何预览图像的数组值。

每张图片都有一个单独的删除按钮。

这是我的代码:

{"balcony":["1477990880.jpg","1477990923.jpg"],"apartment":["1477990905.jpg"]}

   <?php if(isset($multi_images)) 
                    $newArray = array();
                foreach($multi_images as $key => $value) {
                for($i=0; $i<count($value); $i++) { ?>                    

                <div id="filediv">                                    
                    <img src="<?php echo SITE_PATH."/mb-images/delete_pic.png"; ?>" alt="" class="img-responsive" id="multiImagedelete" onclick="">
                    <img src="<?php echo SITE_PATH."/data/users/".$value[$i]; ?>" name="images[]" alt="" class="img-responsive" id="<?php echo $key.$i; ?>">

                    <?php array_push($newArray, $value[$i]);?>

                    {{ Form::label($key, $key, array('class' => 'label_field')) }}
                </div>    
                <?php }} ?>

1 个答案:

答案 0 :(得分:0)

如果您只是想从DOM中删除它们:

$('#filediv img').click(function(){

    $(this).remove();  // remove the image (from the dom)

});

或者:如果你想从数据库中删除它

$('#filediv img').click(function(){

    $.post('url-to-your-controller', DATA, function(){

        alert('The file has been deleted from DB');

    })      

});

DATA将是您的图像的ID,您将在img标签上设置:

<img src="..." data-img-id="The-id-dynamicly-set-here" />

并在jquery中检索它:

$(this).data('img-id');

https://api.jquery.com/jQuery.post/

https://api.jquery.com/data/