ボタンをクリックしてjsonファイルからデータと画像をロードしてからボタンを消す

Question

「もっと読み込む」ボタンをクリックすると、追加の項目が既存のものより下に読み込まれ、「もっと読み込む」ボタンが消えるはずです。追加の項目は、提供されたJSONファイル（numbers.json）からロードする必要があります。

上記のコードで

[ 
    { 
     "itemClass":"apps col-xs-6", 
     "image_src": "images/1.png", 
     "title": "One" 
    }, 
    { 
     "itemClass": "web col-xs-6", 
     "image_src": "images/2.png", 
     "title": "Two" 
    }, 
    { 
     "itemClass": "icons col-xs-6", 
     "image_src": "images/3.png", 
     "title": "Three"  
    } 
] 

Answer 1

$(document).ready(function() { 
    $('#load-more').click(function() { 

     $.getJSON("numbers.json", function(data) { 
      console.log(data); 
      var items = []; 
      $.each(data, function(key, val) { 
       items.push("<li id='" + key + "'>" + val + "</li>"); 
      }); 

      $("<ul/>", { 
       "class": "my-new-list", 
       html: items.join("") 
      }).appendTo("body"); 

     }); 

     $(this).remove(); 
    }); 
}); 

（ID =「負荷以上」で）JSONファイルからデータを取得する負荷よりボタンとhtmlに追加は、その後、JSONをロードした後、ボタン自体を削除します。