【问题标题】:How to remove the row in a table when clicked on "delete icon" using javascript/jquery?使用javascript/jquery单击“删除图标”时如何删除表中的行?
【发布时间】:2019-08-03 17:37:57
【问题描述】:

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

我的表格是动态的,因为它具有添加新行的按钮,并且在单击“添加新”按钮后索引会增加 0、1、2、3、4。(我没有在这里显示该按钮,我在这里只显示了 3 行和从 4 开始的表索引。当我单击该行的删除图标时,我需要删除整行。我尝试使用 document.getElementById("tempTable").deleteRow(indexDelAgent); 的 jquery,但它不起作用。我不希望我的表格数据被推送到任何数组中。我只需要在单击删除图标时删除整行。

【问题讨论】:

    标签: javascript jquery html


    【解决方案1】:

    在您当前的代码alt 中,值以Delete4 开头,但索引4 处没有行,因此它不会按您的预期工作。

    要在当前方案中工作,您需要在剩余行中获取索引。您可以简单地使用index() 方法获取删除按钮中的索引,但是您必须添加1(跳过标题),因为标题中没有删除按钮。

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

    更新:或者更好的方法是在所有tr中获取父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>

    【讨论】:

    • 但是当我点击删除按钮时我的标题被删除了:(
    • @AshwinKarki : indexDelAgent = parseInt($(this).index('.deleteIcon') + 1)
    • @AshwinKarki :您必须在索引中添加标题(行)的数量,因为它包含在行中
    • 但我的代码在添加 document.getElementById("tempTable").deleteRow(index+1);以前只是删除标题。为什么会这样?
    • @AshwinKarki : deleteRow 从整行中删除(包括从页眉页脚,所以你必须从页眉开始计数)
    【解决方案2】:

    由于您使用的是 jQuery,请使用 remove() 方法从 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>

    【讨论】:

    • 问题是它没有在我的代码中删除...我需要通过 console.log(indexDelAgent); 的值删除该行那里是 4,5,6。请问你可以这样查看吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-02-02
    • 2017-09-22
    • 2017-02-28
    • 2017-11-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多