CODEWITHSUNDEEP
javascriptjqueryhtml
ashwin
ashwin

Reputation: 99

How to remove the row in a table when clicked on "delete icon" using javascript/jquery?

	$(document).on("click", ".deleteIcon", function () {

		indexDelAgent = parseInt($(this).attr("alt").replace("Delete", ""));
		console.log("after deletion");
		console.log(indexDelAgent);

		document.getElementById("tempTable").deleteRow(indexDelAgent);

	});
<!DOCTYPE html>
<html>
   <head>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Popper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      <title></title>
   </head>
   <body>
     <table class="table table-bordered" id="tempTable">
   <thead>
      <tr>
         <th>A</th>
         <th>B</th>
         <th>C</th>
         <th>D</th>
         <th>E</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <select>
               <option value="1">QQ</option>
               <option value="2">Apple</option>
               <option value="3">Orange</option>
               <option value="4">Mango </option>
            </select>
         </td>
         <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
         <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
         <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
         <td><i value="Delete" type="button" alt="Delete4"  class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
         <td>
            <select>
               <option value="1">QQ</option>
               <option value="2">Apple</option>
               <option value="3">Orange</option>
               <option value="4">Mango </option>
            </select>
         </td>
         <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
         <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
         <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
         <td><i value="Delete" type="button" alt="Delete5"  class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
         <td>
            <select>
               <option value="1">QQ</option>
               <option value="2">Apple</option>
               <option value="3">Orange</option>
               <option value="4">Mango </option>
            </select>
         </td>
         <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
         <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
         <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
         <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
      </tr>
   </tbody>
</table>
   </body>
   
</html>

My table is dynamic,as It has the button to add the new row and the index gets increased with 0,1,2,3,4 after clicking on "Add new" button.(I have not shown that button here,I have only shown 3 rows here and index of table starting from 4).I need to delete the entire row when I click on delete icon of that row.I tried using the jquery by document.getElementById("tempTable").deleteRow(indexDelAgent); ,but it is not working. I dont want my table data to be pushed in any array.I just need to remove the entire row on clicking delete icon.

Upvotes: 0

Views: 4246

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115242

In your current code alt value starts with Delete4 but there is no row at index 4 so it won't work as you expected.

To work in your current scenario you need to get an index among the remaining rows. You can get the index among the delete button simply using index() method, but you have to add 1(to skip header) since there is no delete button inside the header.

$(document).on("click", ".deleteIcon", function() {

  var indexDelAgent = $(this).index('.deleteIcon') + 1;
  console.log("after deletion");
  console.log(indexDelAgent);

  document.getElementById("tempTable").deleteRow(indexDelAgent);

});
<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <title></title>
</head>

<body>
  <table class="table table-bordered" id="tempTable">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
        <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
        <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
        <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

UPDATE : Or far better way is to get the index of parent tr among all tr.

$(document).on("click", ".deleteIcon", function() {

  var indexDelAgent = $(this).closest('tr').index('#tempTable tr');
  console.log("after deletion");
  console.log(indexDelAgent);

  document.getElementById("tempTable").deleteRow(indexDelAgent);

});
<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <title></title>
</head>

<body>
  <table class="table table-bordered" id="tempTable">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
        <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
        <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
        <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Upvotes: 3

Pranav C Balan
Pranav C Balan

Reputation: 115242

Since you are using jQuery use remove() method to remove an element from DOM.

$(document).on("click", ".deleteIcon", function() {
  // get the parent tr element and remove
  $(this).closest('tr').remove();
});
<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <title></title>
</head>

<body>
  <table class="table table-bordered" id="tempTable">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
        <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
        <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
        <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Upvotes: 0

Related Questions