如何根據，而文件中刪除正確的文本輸入被刪除

我這裏有一個應用程序：APPLICATION 如何根據，而文件中刪除正確的文本輸入被刪除

請按照下列步驟操作：

點擊Add Question按鈕，將文件輸入追加到表格如下：
通過使用文件輸入上傳2張圖片（每次一張圖片），每次圖片上傳成功時，它會顯示上下文件的名稱，它顯示在表格下方和下方d在文本輸入中。
現在問題出在這裏，點擊你上傳的第二個文件名的Remove按鈕，你會看到它成功地刪除了相關的文件名和刪除按鈕，但它刪除了下面的兩個文本輸入。這是不正確的，它應該只刪除其ID與已刪除的文件名相關聯的文本輸入。

所以這是我的問題，當在Remove用戶點擊按鈕，我怎麼能得到的只有被刪除使用已刪除的文件名相關聯的文本輸入，而不是刪除所有文字輸入時，刪除按鈕被點擊？

下面是示出了文件輸入的代碼和它是如何追加到HTML表格的下方，以及表示.hiddenimg股利，其中存儲文本輸入：

Jquery的附加文件輸入形式：

：其中文件輸入形式被附加到和其中文本輸入被存儲在 .hiddenimg div標籤

function GetFormImageCount(){ 
    return $('.imageuploadform').length + 1; 
} 

function insertQuestion(form) { 



    var $tbody = $('#qandatbl_onthefly > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>"); 
    var $image = $("<td width='17%' class='image'></td>"); 

    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
     "<p class='imagef1_upload_form'><label>" + 
     "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + 
     "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
     "<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>" + 
     "<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' />" + 
     "</p><p class='imagemsg'></p><p class='listImage'></p>" + 
     "<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>"); 

    $image.append($fileImage); 



    $tr.append($image); 
    $tbody.append($tr); 


}

HTML表格和表格

<form id="QandA" action="insertQuestion.php" method="post"> <table id="questionBtn" align="center"> <tr> <th> <input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /> </th> </tr> </table> </div> <hr/> <table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th width="17%" class="image">Image</th> </tr> </thead> </table> <div id="qandatbl_onthefly_container"> <table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0"> <tbody> </tbody> </table> </div> <div class="hiddenimg"><!-- All uploaded image file ids go here --></div> </form>

下面是顯示文件上傳的hander代碼，啓動文件上傳的函數，重要的是停止文件上傳的功能，它控制文件名的顯示，文本輸入和刪除按鈕及其控制位置當Remove按鈕被點擊去除：

上傳按鈕處理程序：

function imageClickHandler(imageuploadform){ if(imageValidation(imageuploadform)){ window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); return startImageUpload(imageuploadform); } return false;

開始上傳：

function startImageUpload(imageuploadform){ $(imageuploadform).find('.imagef1_upload_process').show() $(imageuploadform).find('.imagef1_upload_form').hide(); $(imageuploadform).find('.imagemsg').hide(); sourceImageForm = imageuploadform; return true; }

上傳完成：

var imagecounter = 0; function stopImageUpload(success, imageID, imagefilename){ var result = ''; imagecounter++; if (success == 1){ result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>'; $('.hiddenimg').eq(window.lastUploadImageIndex).append('<input type="text" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />'); $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'" data-image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); } $(sourceImageForm).find('.imagef1_upload_process').hide(); $(sourceImageForm).find('.imagemsg').html(result); $(sourceImageForm).find('.imagemsg').show(); $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />"); $(sourceImageForm).find('.imagef1_upload_form').show(); var _imagecounter = imagecounter; $('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) { jQuery.ajax("deleteimage.php?imagefilename=" + $(this).attr('data-image_file_name')).done(function(data) { $(".imagemsg" + _imagecounter).html(data); }); $(this).parent().remove(); $(".hiddenimg input").remove(); }); return true; }

來源

2013-01-24 user1830984

，如果我是這樣做的話，我會添加圖片ID作爲按鈕的值，然後檢索它，並刪除相關的輸入

$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) 
+ '<button type="button" class="deletefileimage" data-imageID="'+imageID+'" data-image_file_name="' + imagefilename + '" value="'+imageID+'">Remove</button> 
<br/> 
<hr/> 
</div>')

然後我會補充說，作爲文本輸入的ID或甚至在名稱或類或什麼

$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) { 
    jQuery.ajax("deleteimage.php?imagefilename=" + $(this).attr('data-image_file_name')).done(function(data) { 
     $(".imagemsg" + _imagecounter).html(data); 
    }); 
var buttonid = $(this).attr(value) // or class or what ever 
    $(this).parent().remove(); 
    $("#"+ buttonid +"").remove(); // this will be the id of the text input (you allready have that in your application . 
});

來源

2013-01-24 17:20:36

如何根據，而文件中刪除正確的文本輸入被刪除

回答

相關問題