Q&A
質問にある、HTMLだけでは、 deleteクラスの span に何も表示されないので、削除を試すことができないです。できれば、 CSSも追加したうえで、jsFiddle に上げていただくことは可能でしょうか？
##わからないこと
いつもお世話になっております。
この度、Jqueryを用いてテーブルに行追加を行ったのですが、追加した行のみ削除することができません。
どこが間違っているのかわかっておらず、ご教授いただければ幸いです。
javascript
1$(function(){ 2 $('#add-row').click(function() { 3 var len = $("table tbody").children().length;console.log(len); 4 var deleteName = 'delete' + (len - 2); 5 var itemName = 'item' + (len - 2); 6 var numName = 'num' + (len - 2); 7 var unit_priceName = 'unit-price' + (len - 2); 8 var priceName = 'price' + (len - 2); 9 $('table tbody tr.tbl-cnt:last') 10 .after('<tr class="table-solid table-input tbl-cnt"><td class="hide-td"><div class="hide-btn delete-btn"><span href="#" name="'+ deleteName +'" class="delete btn btn-success"><i class="fa fa-times fa-fw"></i></span></div></td><td><input type="text" name="'+ itemName +'" class="item" style="margin:10px;"></td><td><input type="text" name="'+ numName +'" class="num" style="margin:10px;"></td><td><input type="text" name="'+ unit_priceName +'" class="unit-price" style="margin:10px;"></td><td><input type="text" name="'+ priceName +'" class="price" style="margin:10px;"></td></tr>'); 11 }); 12 $('.delete').click(function() { 13 var row = $(this).closest("tr").remove();alert(); 14 $(row).remove(); 15 }); 16 17}); 18
html
1<table style="width: 90%;"> 2 <thead> 3 <tr class="billing-title"> 4 <th style="border:none;"></th> 5 <th>品番・品名</th> 6 <th>数量、単位</th> 7 <th>単価</th> 8 <th>金額</th> 9 </tr> 10 </thead> 11 <tbody> 12 <tr class="table-solid table-input tbl-cnt"> 13 <td class="hide-td"> 14 <div class="hide-btn delete-btn"><span href="#" name="delete" class="delete btn btn-success"><i class="fa fa-times fa-fw"></i></span></div> 15 </td> 16 <td><input type="text" name="item" class="item" style="margin:10px;"></td> 17 <td><input type="text" name="num" class="num" style="margin:10px;"></td> 18 <td><input type="text" name="unit-price" class="unit-price" style="margin:10px;"></td> 19 <td><input type="text" name="price" class="price" style="margin:10px;"></td> 20 </tr> 21 <tr class="table-solid table-input tbl-cnt"> 22 <td class="hide-td"> 23 <div class="hide-btn delete-btn"><span href="#" name="delete" class="delete btn btn-success"><i class="fa fa-times fa-fw"></i></span></div> 24 </td> 25 <td><input type="text" name="item" class="item" style="margin:10px;"></td> 26 <td><input type="text" name="num" class="num" style="margin:10px;"></td> 27 <td><input type="text" name="unit-price" class="unit-price" style="margin:10px;"></td> 28 <td><input type="text" name="price" class="price" style="margin:10px;"></td> 29 </tr> 30 <tr class="table-solid table-input"> 31 <td style="border:none;"></td> 32 <td style="border:none;text-align: center;"> 33 <span href="#" id="add-row" class="btn btn-success" style="margin-top: 5px;padding: 3px 3px;"> 34 <i class="fa fa-plus fa-fw"></i>行の追加<span style="font-size:10px;">※最大で20行まで増やせます。</span> 35 </span> 36 </td> 37 <td style="border: 1px solid #bab9b9;text-align:center;" colspan="2">小計</td> 38 <td></td> 39 </tr> 40 <tr class="table-solid table-input"> 41 <td style="border:none;"></td> 42 <td style="border:none;"></td> 43 <td style="border: 1px solid #bab9b9;text-align:center;" colspan="2">税</td> 44 <td></td> 45 </tr> 46 <tr class="table-solid table-input"> 47 <td style="border:none;"></td> 48 <td style="border:none;"></td> 49 <td style="border: 1px solid #bab9b9;text-align:center;" colspan="2">合計</td> 50 <td></td> 51 </tr> 52 </tbody> 53 </table>
###jsFiddle
https://jsfiddle.net/jun68ykt/sLhfz1ye/1/
何卒宜しくお願い致します。
ご回答ありがとうございます。初めてjsfiddleを使います。 https://jsfiddle.net/57g4zLvv/4/ こちらですがjavascriptしか動かないのでしょうか？
お手数かけました。上げて頂いたものを、私のほうで Fork (コピーするようなもの）して、左下の言語のフレームワークの選択から、 言語 JavaScript フレームワーク JQuery 2.2.4 を選び、LOAD TYPE を No wrap - in <head> を選んだものがこちらです。https://jsfiddle.net/jun68ykt/sLhfz1ye/1/ 行の追加を確認できましたし緑色の削除のチップが表示されるのも確認できました。
Jqueryを選択すればよかったんですね。失礼いたしました、ありがとうございます。
回答2件
0
後から追加した要素にイベント操作をさせるには、少し書き方を変える必要があります。
javascript
1 $('table').on('click', '.delete', function() { 2 var row = $(this).closest("tr").remove();alert(); 3 $(row).remove(); 4 });
それか、処理を関数化して、追加するHTMLにもonClick属性を追加して、強制的に実行させるか
javascript
1 2function tr_delete(el){ 3 var row = $(el).closest("tr").remove();alert(); 4 $(row).remove(); 5} 6 7$(function(){ 8 $('#add-row').click(function() { 9 var len = $("table tbody").children().length;console.log(len); 10 var deleteName = 'delete' + (len - 2); 11 var itemName = 'item' + (len - 2); 12 var numName = 'num' + (len - 2); 13 var unit_priceName = 'unit-price' + (len - 2); 14 var priceName = 'price' + (len - 2); 15 $('table tbody tr.tbl-cnt:last') 16 .after('<tr class="table-solid table-input tbl-cnt"><td class="hide-td"><div class="hide-btn delete-btn"><span href="#" name="'+ deleteName +'" class="delete btn btn-success" onClick="tr_delete(this);"><i class="fa fa-times fa-fw"></i></span></div></td><td><input type="text" name="'+ itemName +'" class="item" style="margin:10px;"></td><td><input type="text" name="'+ numName +'" class="num" style="margin:10px;"></td><td><input type="text" name="'+ unit_priceName +'" class="unit-price" style="margin:10px;"></td><td><input type="text" name="'+ priceName +'" class="price" style="margin:10px;"></td></tr>'); 17 //↑onClick追加してます 18 }); 19 20 $('.delete').click(function() { 21 tr_delete(this); 22 }); 23});
どちらでもできますが、前者がスッキリかと。
投稿2018/02/17 09:10
総合スコア3404
0
ベストアンサー
こんにちは。
あまり良い改善策ではありませんが、
とりあえずこれで削除はできます、
という修正案です。
修正前： https://jsfiddle.net/jun68ykt/sLhfz1ye/1/
修正後： https://jsfiddle.net/jun68ykt/sLhfz1ye/7/
修正前のだと、追加された行については、 deleteクラス の span に clickハンドラが
設定されていないので、クリックしても何も起こりません。
なので、 $('#add-row')がクリックされたときも、
javascript
1 $('.delete').click(function() { 2 var row = $(this).closest("tr").remove();alert(); 3 $(row).remove(); 4 });
を行うようにしました。
しかし明らかにこれは冗長で、本当は追加した行の span にのみ
行を削除するハンドラを設定すればよいのですが、そうするには、
.after() に長い文字列を与えるのではなく、 span を $('<span>') で
作って、それに .click() で行削除の関数を設定するか、もしくは
今のまま文字列でいくなら、 行削除を行う処理を個別に関数化して、
html
1<span onclick="deleteRow(); return(false);">
のようにすればよいかと思います。
補足
回答に
html
1<span onclick="deleteRow(); return(false);">のように
と書いたほうのやり方で修正すると、たとえば以下になります。
https://jsfiddle.net/jun68ykt/sLhfz1ye/31/
行を削除する関数を、以下のように jQuery のヘルパ関数として設定します。
javascript
1 2 $.deleteRow = function() { 3 var row = $(this).closest("tr").remove(); 4 alert(); 5 $(row).remove(); 6 };
この $.deleteRow を、 追加する行の中の <span> の clickハンドラとして使うには、
javascript
1<span onclick="$.deleteRow.apply(this);"
と書きます。
また、初期表示のときの行に、clickハンドラを設定するところは
javascript
1$('.delete').click($.deleteRow);
と書けます。
投稿2018/02/17 09:08
編集2018/02/17 10:00総合スコア9058
ご回答ありがとうございました。
後から追加したものに対してはそのように行えばよかったんですね。
ありがとうございました！
解決されたようで、よかったです！
回答に補足しましたので、こちらもご参考にして頂ければと思います。
kszk311 さんの
$('table').on('click', '.delete', function() { ・・・ } );
が一番よい修正方法だと思います。
なお、onclick と on('click', の違いについては、
jQuery 便利なonを使おう（on click) shizumaさん @Qiita
https://qiita.com/shizuma/items/d561f37f864c3ebb5096
が参考になります。
あなたの回答
tips
プレビュー
