按鈕刪除文件的每個上傳？

Question

目前我的代碼正在做的是，我給了用戶上傳最多4個文件的靈活性，每個文本框最多可以包含4個文本框。一旦用戶點擊更多文件，每個文本框都會加載。我已經創建了1個文件按鈕，4個文本框，以便用戶可以上傳文件。下面的代碼默認情況下有1個選項顯示上傳文件，當他們點擊更多文件時，另一個文本框出現上傳第二個文件，當他們再次點擊更多文件給第三個文本框和用戶可以上傳文件，並在第四次停止。我想要做的是我想爲每個加載的文本框都有一個刪除按鈕，以便如果用戶想要刪除文件，則他們上傳的文件將被刪除。

下面

<div class="filediv col-md-12"> 
    <!-- <i class="fa fa-upload" aria-hidden="true"></i>--> 
    @Html.LabelFor(model => model.UploadFile, "Supporting file upload", new { @style = "", @class = "" }) 
    <p class="form-text text-muted"> 
     File upload restrictions are as follows:</p> 
    <ul> 
     <li>File size: @Model.GetBytesasText() MB </li> 
     <li>Format: @allowedFileTypes </li> 
    </ul> 

     @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "", @type = "file", id = "upload" }) 
     <!--<input type="submit" name="submit" value="Upload" />--> 
     @Html.ValidationMessageFor(model => model.UploadFile) 
</div> 

<div id="Uploadsecfile" class="filediv uploadsecfile col-md-12" style="display:none"> 
    <!-- <i class="fa fa-upload" aria-hidden="true"></i>--> 
    @Html.LabelFor(model => model.UploadFile, "", new { @style = "", @class = "" }) 
    @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "", @type = "file", id = "" }) 
    <!--<input type="submit" name="submit" value="Upload" />--> 
    @Html.ValidationMessageFor(model => model.UploadFile) 
</div> 

<div id="Uploadthirdfile" class="filediv uploadthirdfile col-md-12" style="display:none"> 
    <!-- <i class="fa fa-upload" aria-hidden="true"></i>--> 
    @Html.LabelFor(model => model.UploadFile, "", new { @style = "", @class = "" }) 
    @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "", @type = "file", id = "" }) 
    <!--<input type="submit" name="submit" value="Upload" />--> 
    @Html.ValidationMessageFor(model => model.UploadFile) 
</div> 

<div id="Uploadfourthfile" class="filediv uploadfourthfile col-md-12" style="display:none"> 
    <!-- <i class="fa fa-upload" aria-hidden="true"></i>--> 
    @Html.LabelFor(model => model.UploadFile, "", new { @style = "", @class = "" }) 
    @Html.TextBoxFor(model => model.File, new { @style = "width: 300px;", @class = "", @type = "file", id = "" }) 
    <!--<input type="submit" name="submit" value="Upload" />--> 
    @Html.ValidationMessageFor(model => model.UploadFile) 
</div> 


<div class="help-block col-md-12"> 
    @Html.ValidationSummary(true, "", new { @class = "custom-validation-summary" }) 
</div> 

//Upload more files button 

<div class="col-md-12"> 
    <button type="button" class="btn btn-success uploadmorefiles"><i class="fa fa-plus-square" aria-hidden="true"></i> More files</button> 
</div> 

中的JavaScript的HTML下面

$('.uploadmorefiles').click(function() { 
    var n = $('.filediv:visible').length; 
    if (n == 4) { 
     $('.uploadmorefiles').hide(); 
    } else { 
     if (n == 1) 
      $('.uploadsecfile').show(); 
     { 
      if (n == 2) 
       $('.uploadthirdfile').show(); 
     } 

     { 
      if (n == 3) 
       $('.uploadfourthfile').show(); 
     } 

    } 

}); 

Answer 1

代碼應該像

$('.uploadmorefiles').click(function() { 
      var n = $('.filediv:visible').length; 
      switch(n){ 
       case 1: 
        $('.uploadsecfile').show(); 
        break; 
       case 2: 
        $('.uploadthirdfile').show(); 
        break; 
       case 3: 
        $('.uploadfourthfile').show(); 
        $('.uploadmorefiles').hide(); 
        break; 
       } 
     });