質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

0回答

1044閲覧

[JavaScript][HTML] 表示項目ごとに削除ボタンをつけたい

rwatanabe

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

1クリップ

投稿2020/07/09 07:07

編集2020/07/10 07:44

前提・実現したいこと

お世話になっております。
選択したファイルのファイル名とそのファイルを削除できる削除ボタン出力するように
実装しています。

2つのファイルを選択した場合
削除ボタンaを押すと○○.txtが削除され、削除ボタンbを押すと□□.jpgが削除される。
選択ボタン押すとエクスプローラーが開く。
ーーーーー以下、実行結果--------------
○○.txt [削除ボタンa]
□□.jpg [削除ボタンb]
入力項目 [選択ボタン]

発生している問題・エラーメッセージ

削除ボタンa、削除ボタンbともに押すと、表示されているファイル全て削除される。

該当のソースコード

html

1<tr class="tenpu_docs"> 2 <th class="v_top">添付資料</th> 3 <td> 4 <div class="file_row"> 5 <div id="FileName" class="file_wrapper"> 6 <input type="file" th:field="*{icon_file}" id="docs" th:path="*{icon_file}" multiple="multiple"/> 7 <p class="file_name_keeper"></p><label for="docs">選択</label> 8 </div> 9 </div> 10 <p style="color: #FF0000;" th:if="${#fields.hasErrors('*{icon_file}')}" th:errors="*{icon_file}"></p> 11 </td> 12</tr>

javascript

1//アップロードファイル選択 2$(document).on('change','#docs',function(){ 3 var file = $(this).prop('files'); 4 var len = file.length; 5 6 for (var i=0; i < len; i++) { 7 var fileName = file[i].name; 8 console.log(fileName); 9 var element = document.getElementById('FileName'); 10 //var filePath = fileData.presult; 11 12 //ファイル名を表示 13 if (i==0) { 14 $(this).closest('div').find('p.file_name_keeper').html(fileName).addClass('on_keep'); 15 16 } else { 17 var h = '<p class="file_name_keeper on_keep">' + fileName + '</p>'; 18 file_wrapper.innerHTML = element.insertAdjacentHTML('beforeend', h); 19 } 20 21 //削除ボタンを追加 22 $(this).closest('div').append('<span class="b_del remove"></span>'); 23 } 24 //選択ラベルを削除 25 $(this).closest('div').find('label').remove(); 26 //追加ボタンを削除 27 // $(this).closest('td').find('.b_add').remove(); 28 //アップロードフィールドのセットを追加 29 $(this).closest('td').append('<div class="file_row"><div class="file_wrapper"><input type="file" name="tenpu_file[]" id="docs'+dupNum+'"><p class="file_name_keeper"></p><label for="docs'+dupNum+'">選択</label></div><!--<span class="b_del"></span>--></div>') 30 dupNum++; 31}) 32//アップロードファイル削除 33$(document).on('click','tr.tenpu_docs .b_del', function () { 34 $(this).closest('div.file_wrapper').remove(); 35})

補足情報(FW/ツールのバージョンなど)

jQueryバージョン
jquery3.3.0.min.js
jquery-ui.js
jquery.ui.touch-punch.min.js

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問