2017-11-26 8 views
1

削除ボタンをクリックしてJson配列からフィールドを削除する方法を解明しようとしています。私はこれでかなり新しいので、これを達成する方法を理解できないようです。ここではJSONファイルからデータを引き出し、単純なテーブルがどのように見えるかです:私は何とか更新し、する必要がノードとjQuery(データベースなし)を使用してJsonからテーブル行を削除する

$(".task_box").on("click", function(evt){ 
 
    $("#task_table").show(); 
 
    $.getJSON("db.json", function(data) { 
 
     $.each(data, function(key,value) { 
 
     console.log("Get Json data worked"); 
 
     task = data; 
 
     var row = $('<tr><td>' + task.box1[0].taskName+ '</td><td>' 
 
           + task.box1[0].time + '</td><td>' 
 
           + task.box1[0].location + '</td><td>' + '<button type="button" class="btn btn-warning">Delete</button>') 
 
     $('#task_table').append(row); 
 
    }); 
 
}); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
      <div class="col-lg-12 col-md-12"> 
 
      <div class="tasks_list"> 
 
        <table id="task_table" class="tableStyle" > 
 
         <tr> 
 
         <th>Task Name</th> 
 
         <th>Time</th> 
 
         <th>Location</th> 
 
         </tr> 
 
         </table> 
 
        </div> 
 
       </div> 
 
     </div>

ここ

A simple table that pulls the data from a JSON file

コードがありますノードとテーブルの内容を削除する、誰も私がこれを達成するのを助けることができますか?また、私の配列を取得する良い方法はありますか?これは私のためにあまりにもうまく動かない。

私は1週間も経たないうちにノードを学んでいますが、これは本当に分かりません。

答えて

0

各ボタンのonClickの代わりに、各ボタンを「削除」と言うクラスで設定し、イベントをテーブルにバインドし、jqueryを使用して最も近いtrを削除することができます。

最初の変更:

'<button type="button" class="btn btn-warning">Delete</button>' 

'<button type="button" class="btn btn-warning delete">Delete</button>' 

にし、それバインドテーブル各ボタンに固有のIDを与えると `$を呼び出す

$('table').on('click','tr a.delete',function(e){ 
    e.preventDefault(); 
    $(this).closest('tr').remove(); 
}); 
+0

避けてください(「#IDへ").remove();'それはイベントハンドラの数を増やし、あなたのユースケースでは不要です。 –

関連する問題