jquery - 删除单个表行

Question

我一直在网上搜索，但我没有找到解决这个问题的方法。是的，我尝试了其他方法，但它也没有奏效。任何帮助将不胜感激。

所以这里是这样：我想从表中删除单行，每一行都有唯一的 ID，我不知道问题是什么......可能是什么解决方案？

   <table id="Mytabel">
      <tr>
          <th>Month</th>
          <th>Savings</th>
          <th>DELETE ROW</th>
      </tr>
   </table> 

   <input type="button" value="ADD" id="btnADD"/>
   <script type="text/javascript">

      var cont = 0;
      function addRow(array) {
         $("#Mytabel").append("<tr id=row+" + array.Id + "><td>" + array.Name +"</td>
         <td>" + array.Cost + "</td>
         <td><input type='button' id=" + array.Id + " value='DELETE' onClick='test(" + array.Id + ")'/></td></tr>");
      }

      function test(id) {
          $("#row"+id).remove();
      }

      $(function() {

         $("#btnADD").click(function() {

             var vet = { Id: cont, Name: "jan", Cost: 15 };
             cont++;
             addRow(vet);
         });
      });

  </script>

Answer 1

你可以这样做 -

var cont = 0;

function addRow(array) {
    $("#Mytabel").append("<tr id=row+" + array.Id + "><td>" + array.Name + "</td><td>" + array.Cost + "</td><td><input type='button' class='delete' value='DELETE'/></td></tr>");
}

$(function () {
    $("#btnADD").click(function () {
        var vet = {
            Id: cont,
            Name: "jan",
            Cost: 15
        };
        cont++;
        addRow(vet);
    });
    $('#Mytabel').on('click', '.delete', function () {
        $(this).closest('tr').remove();
    })
});

演示---> http://jsfiddle.net/UMVyQ/