Question

I have a jquery function below when when an upload has been completed, it will store the name of the file in a string and it’s id in a text input. Now at bottom of function, if the user clicks on the deletevideofile button, then it is suppose to remove the file name and the textinput which belongs to that remove button. But problem is that even thought it removes the correct file name only, it removes all text inputs rather than just removing the correct text input.

My question is how can I only remove the correct text input only when the remove button is clicked?

Below is code:

function stopVideoUpload(success, videoID, videofilename){

      var result = '';
      videocounter++;

      if (success == 1){
         result = '<span class="videomsg'+videocounter+'">The file was uploaded successfully</span>';
          $('.listVideo').eq(window.lastUploadVideoIndex).append('<input type="text" name="vidid" value="' + videoID + '" />');
          $('.listVideo').eq(window.lastUploadVideoIndex).append('<div>' + htmlEncode(videofilename) + '<button type="button" class="deletefilevideo" video_file_name="' + videofilename + '">Remove</button><br/><hr/></div>');      }

  var _videocounter = videocounter;

$('.listVideo').eq(window.lastUploadVideoIndex).find(".deletefilevideo").on("click", function(event) {
    var video_file_name = $(this).attr('video_file_name');

    jQuery.ajax("deletevideo.php?videofilename=" + video_file_name)
        .done(function(data) {

        $(".videomsg" + _videocounter).html(data);
    });

       $(this).parent().siblings('input[name="vidid"]').andSelf().remove();
});


      return true;   
}

Answer 1

In addition to generating the input boxes with the name “vidid”, add an id attribute to the <input> element with a unique ID for every video.

Then change the selector in your .siblings() function in your .remove() line to match the id of the <input> that’s being generated.

Here’s some example JavaScript. Modify it to fit your needs:

function stopVideoUpload(success, videoID, videofilename) {

    var result = '', _videocounter;
    videocounter++;

    if (success == 1) {
        result = '<span class="videomsg'+videocounter+'">The file was uploaded successfully</span>';
        $('.listVideo').eq(window.lastUploadVideoIndex).append('<input type="text" name="vidid" id="'+videoID+'" value="' + videoID + '" />');
        $('.listVideo').eq(window.lastUploadVideoIndex).append('<div>' + htmlEncode(videofilename) + '<button type="button" class="deletefilevideo" data-videoID="'+videoID+'"  data-video_file_name="' + videofilename + '">Remove</button><br/><hr/></div>');
    }

    _videocounter = videocounter;

    $('.listVideo').eq(window.lastUploadVideoIndex).find(".deletefilevideo").on("click", function(event) {
        jQuery.ajax("deletevideo.php?videofilename=" + $(this).attr('data-video_file_name')).done(function(data) {
            $(".videomsg" + _videocounter).html(data);
        });

        $(this).parent().siblings('#'+ $(this).attr('data-videoID')).andSelf().remove();
    });


    return true;   
}