ファイルの各アップロードを削除するボタン？

Question

現在、私のコードでは、最大4つのファイル（1つのテキストボックスにつき1つのファイルにつき最大4つのテキストボックス）をアップロードする柔軟性をユーザに与えています。ユーザーがさらにファイルをクリックすると、各テキストボックスが読み込まれます。私は1つのファイルボタン、4つのテキストボックスを作成したので、ユーザーはそこにファイルをアップロードすることができます。以下のコードはデフォルトで動作します。 3つ目のテキストボックスが表示され、ユーザーがファイルをアップロードして4回目に停止します。私がしたいのは、これらのテキストボックスごとに削除ボタンを用意して、アップロードしたファイルを削除したい場合、テキストボックス全体が削除されるようにすることです。

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

下記のHTMLのJavaScript

$('.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; 
       } 
     });