CODEWITHSUNDEEP
jqueryhtml-tablerow
Victor Franchi Zeclhynscki
Victor Franchi Zeclhynscki

Reputation: 201

Remove Single Table Row

I've been searching through the web but I've had no luck in finding the solution to this problem. Yes I've tried other ways, but it didn't work either. Any help will be appreciated.

So here it goes: I want to remove on single row from the table, each row has unique ID and I dont know what the problem is... What could be the solution?

   <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>

Upvotes: 0

Views: 1357

Answers (1)

Adil Shaikh
Adil Shaikh

Reputation: 44740

You can do it this way -

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();
    })
});

Demo ---> http://jsfiddle.net/UMVyQ/

Upvotes: 2

Related Questions