Imran Qamer
Imran Qamer

Reputation: 2265

Jquery row removing not working for me, How to set it?

I have checkbox in the first column of the row with name addedCars[] and I am using this code:

$('input[name=addedCars]:checked').closest("tr").remove();

in jquery to remove that row whose checkbox is checked, but it does not work for me, also there is no error when I console this line be deleting remove() from the end it also shows me an object. What is the error can anyone help?

$('#delAddedCarBtn').click(function() {
  console.log("Button clicked");
  $('input[name=addedCars]:checked').closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-th-block table-danger">
  <thead>
    <tr>
      <th scope="col"><strong>&nbsp;</strong></th>
      <th scope="col"><strong>CarNo</strong></th>
      <th scope="col"><strong>Car Name</strong></th>
      <th scope="col"><strong>Type</strong></th>
      <th scope="col"><strong>Model</strong></th>
      <th scope="col"><strong>SalesPrice</strong></th>
    </tr>
  </thead>
  <tbody id="carTableBody">
    <tr>
      <td><input type="checkbox" data-name="undefined" value="undefined" name="addedCars[]"></td>
      <td>2</td>
      <td>test1</td>
      <td>test2</td>
      <td>2000</td>
      <td>1720000</td>
    </tr>
    <tr>
      <td><input type="checkbox" data-name="undefined" value="undefined" name="addedCars[]"></td>
      <td>1</td>
      <td>test</td>
      <td>test</td>
      <td>2010</td>
      <td>1320000</td>
    </tr>
  </tbody>
</table>
<button id="delAddedCarBtn">Delete</button>

Upvotes: 2

Views: 80

Answers (2)

Ayyanar G
Ayyanar G

Reputation: 1545

try like this

$('table tr').has('input[name="addedCars"]:checked').remove();

or

$('input[name="addedCars"]:checked').parents("tr").remove();

Upvotes: 3

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

Try like this:

$('input[name^=addedCars]:checked').closest("tr").remove();

Upvotes: 2

Related Questions