on the click of the image it is not removing-Jquery : selecting the multiple image from the input tag after that i am previewing the selected image but when i click on that image it should delete from the input tag it does not select that picture anymore. but in my case that picture is removing only in preview not in input. And save it into database


here is the code


                        <?php
                        include_once 'Functions.php';
                        $connect=new Connection();
                        $link=$connect->Connect();
    
                        print_r($_FILES['fil']['name']);
                        ?>
                        <html>
                        <head>
                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
                        <script>
                        $(document).ready(function(){
                            var image=('')
                            $('input[type="file"]'). change(function(e){
    var fileName = e. target. files[0]. name;
    alert('The file "' + fileName + '" has been selected.' );
    });
    
                                $(function() {
    
                            var imagesPreview = function(input, placeToInsertImagePreview) {
    
                                if (input.files) {
                                    var filesAmount = input.files.length;
    
                                    for (i = 0; i < filesAmount; i++) {
                                        var reader = new FileReader();
                                        reader.onload = function(event) {
                                            $($.parseHTML('<img class="picture" width="70" name="multipic">')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                                        $('.picture').click(function(){
                                            $(this).remove();
                                           
                                        });
                                        }
    
                                        reader.readAsDataURL(input.files[i]);
                                    }
                                }
    
                            };
    
                            $('#gallery-photo-add').on('change', function() {
                                imagesPreview(this,'div.gallery');
                            });
                        });
                        });
                        </script>
                        </head>
                        <body>
                        <form name="update"  enctype='multipart/form-data' method="POST">
                        <input type="file" name="fil[]" multiple id="gallery-photo-add" class="a1">
                        <div class="gallery"></div>
                        <input type="submit" name="btnupdate" value="Update" />
                        </form>
                        </body>
                        </html>