jQueryとBootstrapでファイルのインプットボタンに、増減とクリアの機能をつけたい。

Question

jQueryとBootstrapでファイルのインプットボタンに、増減とクリアの機能をつけたい。
コードは以下のような感じです。

<form method="POST" class="form-horizontal" name="form" action="" enctype="multipart/form-data">
  
//中略


  <div class="form-group">
    <label class="col-sm-2 control-label">ファイル</label>
      <div class="col-sm-10" id="input_pluralBox">
        <div id="input_plural" class=”form-inline”>
         <input id="fileInput" type="file" name="file[]" multiple>
         <input type="button" value="＋" class="add pluralBtn">
         <input type="button" value="－" class="del pluralBtn">
         <input onclick="clearFileInput()" type="button" value="Clear">
        </div>
     </div>
  </div>

//中略

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("click", ".add", function() {
    $(this).parent().clone(true).insertAfter($(this).parent());
});
$(document).on("click", ".del", function() {
    var target = $(this).parent();
    if (target.parent().children().length > 1) {
        target.remove();
    }
});
function clearFileInput(){
           var oldInput = document.getElementById("fileInput");

           var newInput = document.createElement("input");

           newInput.type = "file";
           newInput.id = oldInput.id;
           newInput.name = oldInput.name;
           newInput.className = oldInput.className;
           newInput.style.cssText = oldInput.style.cssText;
           // copy any other relevant attributes

           oldInput.parentNode.replaceChild(newInput, oldInput);
       }
</script>

なお、フレームワークはララベルを使用してますが、今回の質問内容とはあまり関係がないかと思います。

こちらのコードですと問題点が３点あります。

・問題点１
レイアウトがきれいになりません。input ボタンのレイアウトを横並びにしたいです。

・問題点２
ファイルアップロードボタンを増やした時、上下にマージンをつけたいのですが、うまくいきません。

・問題点３
そして、現在のコードだと、clearのボタンを押してファイルを消去使用とすると、どの階層の「clear」ボタンを押しても一番上「ファイルを選択」で選んだファイルが消去されます。

一番上で選択したファイルは一番上のclearボタンで消去。
２番目で選択したファイルは２番目のclearボタンで消去。

という風に各階層のボタンがリンクするようにしたいです。

上記の３点の問題についてアドバイスいただけたらと思います。

Comments

[m.ts10806]

bootstrapでもform-controlクラスやbtnクラスは使わない想定ですか？

[退会済みユーザー]

コメントありがとうございます。
いえ、特にこだわりはありません。
求める結果が得られれば、使いたいです。

[m.ts10806]

グリッドレイアウトと併せて使えればキレイに揃うとは思います。ドキュメント読んで色々やってみてください。
グリッドの概念理解できていればご自身でも解決できます。

[退会済みユーザー]

ありがとうございます。
いまのところまだできずにいますが、がんばります。

Answer 1

div タグに　style="display:inline-flex"　を埋め込むことで解決できました。
ありがとうございました。