Jquery hide and delete image after append and upload

Question

I am trying to hide and delete image, this is the append code after upload

Append code

 $('#uploaded_images').append('<div class="container uploaded_image"> <input type="text" value="'+data['result']+'" name="uploaded_image_name[]" id="uploaded_image_name" hidden> <img class="img-thumbnail" width="200" height="200" src="server/uploads/'+data['result']+'" /> <a  id="delete" href="index.php?image='+data['result']+'" class="btn btn-danger">'+data['result']+'</a> </div>');

Hide code

$('body').on('click', '#delete', function() {
   // code here
   $(this).hide();
});

For some reason $(this).hide(); it's not working

I also would like to send a GET request to delete.php?image=+data['result']+ to delete the image from files.

Does somebody have a solution?

score 1 · Answer 1 · answered Jun 11 '20 at 05:17

1

because your code is only delete button is hide.first find parent div and after this parent div hide this is proper working. Replace this

$(this).hide();

to

 $(this).parent('.uploaded_image').hide();

answered Jun 11 '20 at 05:17

Paras Raiyani

748
5
10

Thanks for explanation, could you help me to send the get request to delete the image? – Otávio Barreto Jun 11 '20 at 13:02
for some reason It works on pure html but it's not working on bootstrap, maybe there is a conflict on something. – Otávio Barreto Jun 11 '20 at 13:09

Always Helping · Accepted Answer · 2020-06-12T01:27:33.480

1

Here is working fiddle for hide / remove: https://jsfiddle.net/usmanmunir/wj2rLhus/5/

$('body').on('click', '#delete', function() {
   $(this).parent().remove();
});

To Remove files from the server upload directory you can send delete.php?image=fileName

In delele.php

$FileName = $_GET['image']

Store file name as you want by using the function implode in PHP

$FileName = array('image1', 'image2', 'image3');
$Dash_Added = implode("-", $array);

echo $Dash_Added;

unlink() will let you delete file from your upload directory if thats what you want.

unlink('server/uploads'.$FileName)

Upload file and store them to array

<input type="file" onchange="SelectFiles(this)" multiple/>
<input type="submit" onclick="UploadFiles(this)" value="Upload"/>


<script>

var allFileName = []

function SelectFiles(_this) {
  for (var i = 0; i < _this.files.length; i++) {
   allFileName.push(_this.files[i]);
  }
}

function UploadFiles() {
$.ajax({                 
  url:'haha.php',                 
  dataType:'json',                 
  type:'POST',                 
  cache:true,                 
  data: {                   
    file_names: allFileName                 
  },
  success: function(response) {

    }
  })
}

</script>

Hope this helps.

edited Jun 12 '20 at 01:27

answered Jun 11 '20 at 05:27

Always Helping

14,316
4
13
29

I know how to delete in php, but could you help me to send a get request on click to the backend/delete page without reload the current page? – Otávio Barreto Jun 11 '20 at 13:04
for some reason It works on pure html but it's not working on bootstrap, maybe there is a conflict on something. – Otávio Barreto Jun 11 '20 at 13:09
You just need to use event.preventDefault() on your function so it will just send request via to backend via ajax without reloading the page. Hope it helps. – Always Helping Jun 11 '20 at 23:34
Now after all uploaded images I need to send to database `var id = $(this).attr('deleteimg'); $.ajax({ url:'test.php', dataType:'json', type:'get', cache:true, data: { id: id }`this is the delete code I need to send to a db page with another request but in this case I need to send all attr with deleteimg to database `var id = $(this).attr('deleteimg');` because this is where the image names are, can you help? I need to send all images into a single string – Otávio Barreto Jun 12 '20 at 00:53
Can you share a live working sandbox or your complete code files i will be able to with delete and upload for you. – Always Helping Jun 12 '20 at 00:59
I have the delete via get already working , now I just need to send to database into a single string all image names , named are inside `attr deleteimg` so what I need is to get all `attr deleteimg` and create a single string with concatenation separated by `-` this is like `image1.jpg-image2.jpg`etc this is how the element is like `` so I need to get all in the page and send via a single string with concatenation. – Otávio Barreto Jun 12 '20 at 01:03
1

I have updated my answer. You will need to store all uploaded images in an empty array and send that array data to backend php file and do a foreach loop for all the file coming and store image name to Database. – Always Helping Jun 12 '20 at 01:29
Cool, Thank you! – Otávio Barreto Jun 12 '20 at 01:42

Jquery hide and delete image after append and upload

2 Answers2