body {
  background-color: #a3d5d3;
  font-family: 'Helvetica', 'Arial', sans-serif;
  width: 450px;
  margin: 0 auto;
  padding: 20px;
}

table, input {
 margin: 5px;
}

input[type=text] {
 width: 120px;
}

table,tr,th,td {
  font-size: 14px;
  width: 70%;
  list-style-type: none;
  border-radius: 3px;
  border: 1px solid #000;
  padding: 5px;
}

td {
  background: #eeeff0;
  padding-left: 12px;
}

$(function(){
  // 画面表示時に価格の合計値を計算
  sum();

  // 削除ボタン押下時の処理
  // ↓最初の削除ボタンしか反応しない23
  //$("#delete").click(function(event){
  // ↓すべての削除ボタンが反応する
  $("[id=delete]").click(function(event){
    var target = $(event.target);
    target.parents("tr").remove();
    // 合計値を再計算
    sum();
  });
  
  /**** 共通関数 ****/
  // 要素を削除する
  function deleteElement(name, element) {
    return;
  }

  // 合計値を求める
  function sum(){
    // 表の金額を取得する(tdの奇数列を取得)
    var pricelist = $("table td[class=price]").map(function(index, val){
      var price = parseInt($(val).text());
      if(price >= 0) {
        return price;
      } else {
        return null;
      }
    });
    // 価格の合計を求める
    var total = 0;
    pricelist.each(function(index, val){
      total = total + val;
    });
    $(".sum_price").text("合計："+total+"円");
  }
});