Remove picture when user clicks "X" that shows only when the user hovers over the picture

Question

I have this multiple images fileupload that shows images that are uploaded as thumbnails.

What I'm looking to achieve is that when the user hovers over one of the thumbnail images, an "X" shows up and when clicked it deletes that picture(so that the thumbnail is not displayed anymore, and that it doesn't get uploaded in the form).

Here is the code:

 if(window.File && window.FileList && window.FileReader)
{
    var filesInput = document.getElementById("files");

    filesInput.addEventListener("change", function(event){

        var files = event.target.files; //FileList object
        var output = document.getElementById("result");
        if(files.length = 1){

        }
        for(var i = 0; i< files.length; i++)
        {
            var file = files[i];

            //Only pics
            if(!file.type.match('image'))
              continue;

            var picReader = new FileReader();

            picReader.addEventListener("load",function(event){

                var picFile = event.target;
                //console.log(picFile);
                var div = document.createElement("div");
                div.setAttribute('class', 'col-sms-3 col-sm-3');
                div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                        "title='" + picFile.name + "'/><a href='javascript:;' class='remove_pict'><i class='soap-icon-close' style='font-size:2.5em;'></i></a>";       
                //div.children[1].addEventListener("click", function(event){
                   //div.parentNode.removeChild(div);
                //});        
                output.insertBefore(div,null);            
            });

             //Read the image
            picReader.readAsDataURL(file);               
        }                                     
    });
}
else 
{
    console.log("Your browser does not support File API");
}

Now, I've tried doing something like this:

    $(document).on("mouseenter", ".thumbnail", function() {
    $(".remove_pict").show(); //OR
    //OR THIS: $(".thumbnail").closest(".remove_pict").show;
});

$(document).on("mouseleave", ".thumbnail", function() {
    $(".remove_pict").hide(); 
    //OR THIS: $(.thumbnail).closest(".remove_pict").hide();
});

The closest doesn't even work, and the other method simply reveals all the thumbnails and they also flicker very fast(idk why). The problem is I don't know how to target the dynamically added <a> and only show that one and remove the picture that it corresponds to.