title: How to remove the row in a table when clicked on "delete icon" using javascript/jquery?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(document).on("click", ".deleteIcon", function () {
  
    indexDelAgent = parseInt($(this).attr("alt").replace("Delete", ""));
    console.log("after deletion");
    console.log(indexDelAgent);
  
    document.getElementById("tempTable").deleteRow(indexDelAgent);
  
   });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;!-- Latest compiled and minified CSS --&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
        &lt;!-- jQuery library --&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;!-- Popper JS --&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
        &lt;!-- Latest compiled JavaScript --&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
        &lt;title&gt;&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
       &lt;table class="table table-bordered" id="tempTable"&gt;
     &lt;thead&gt;
        &lt;tr&gt;
           &lt;th&gt;A&lt;/th&gt;
           &lt;th&gt;B&lt;/th&gt;
           &lt;th&gt;C&lt;/th&gt;
           &lt;th&gt;D&lt;/th&gt;
           &lt;th&gt;E&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;select&gt;
                 &lt;option value="1"&gt;QQ&lt;/option&gt;
                 &lt;option value="2"&gt;Apple&lt;/option&gt;
                 &lt;option value="3"&gt;Orange&lt;/option&gt;
                 &lt;option value="4"&gt;Mango &lt;/option&gt;
              &lt;/select&gt;
           &lt;/td&gt;
           &lt;td&gt;&lt;input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;i value="Delete" type="button" alt="Delete4"  class="deleteIcon fa fa-trash"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;select&gt;
                 &lt;option value="1"&gt;QQ&lt;/option&gt;
                 &lt;option value="2"&gt;Apple&lt;/option&gt;
                 &lt;option value="3"&gt;Orange&lt;/option&gt;
                 &lt;option value="4"&gt;Mango &lt;/option&gt;
              &lt;/select&gt;
           &lt;/td&gt;
           &lt;td&gt;&lt;input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;i value="Delete" type="button" alt="Delete5"  class="deleteIcon fa fa-trash"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;select&gt;
                 &lt;option value="1"&gt;QQ&lt;/option&gt;
                 &lt;option value="2"&gt;Apple&lt;/option&gt;
                 &lt;option value="3"&gt;Orange&lt;/option&gt;
                 &lt;option value="4"&gt;Mango &lt;/option&gt;
              &lt;/select&gt;
           &lt;/td&gt;
           &lt;td&gt;&lt;input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""&gt;&lt;/td&gt;
           &lt;td&gt;&lt;i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
     &lt;/body&gt;
     
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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 <code>document.getElementById("tempTable").deleteRow(indexDelAgent);</code> ,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.</p>