jquery - 如何仅删除正确的文本输入？

Question

下面有一个 jquery 函数，当上传完成时，它将把文件名存储在字符串中，并将其 id 存储在文本输入中。现在，在函数底部，如果用户单击“删除视频文件”按钮，则假定删除文件名和属于该删除按钮的文本输入。但问题是，即使它只删除正确的文件名，它也会删除所有文本输入，而不仅仅是删除正确的文本输入。

我的问题是如何仅在单击删除按钮时删除正确的文本输入？

下面是代码:

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

除了生成名称为“vidid”的输入框之外，还添加 id属性为<input>每个视频都有唯一 ID 的元素。

然后更改 .siblings() 中的选择器在您的 .remove() 中运行行匹配 id <input>的正在生成。

这是一些 JavaScript 示例。修改它以满足您的需要:

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;   
}