CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Deepak Tomar
Deepak Tomar

Reputation: 57

jquery delete a row of table (<tr>) through clicking a label

I developed a table and in each row there is 1 column and there are one check box and 2 labels in each row.

$('input[type="label"]').click(function() {
      var id = $(this).attr("id");
      $(this).parent("tr:first").remove()
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

when i click on delete label then the entire row should be deleted. and the row below it should automatically come one place above.

what corrections should be done in the jquery?

Upvotes: 0

Views: 222

Answers (2)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to use $(this).closest("tr").remove() with click event on the label having class glyphicon and glyphicon-trash:

$('.glyphicon.glyphicon-trash').click(function(){
      $(this).closest("tr").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">

  <table class="table">
    <thead>
      <tr>
        <th>To Do List</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox1" /><label>Task 1</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox2" /><label>Task 2</label><label class="glyphicon glyphicon-trash"></label>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div class="checkbox">
            <input type="checkbox" id="checkbox3" /><label>Task 3</label><label class="glyphicon glyphicon-trash" id="3"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 3

Martin
Martin

Reputation: 475

Your selector input[type=label] is not going to match any of your existing html elements. You might want to try the following selector: $('.checkbox label.glyphicon-trash')

Upvotes: 1

Related Questions