Как удалить строку в таблице при нажатии на "удалить значок" с помощью javascript / jquery?

ProgramBox

Как удалить строку в таблице при нажатии на «удалить значок» с помощью javascript / jquery?

Post author:admin
Запись опубликована:16 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

 	$(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).Мне нужно удалить всю строку, когда я нажимаю на значок удаления этой строки.Я пытался использовать jquery с помощью document.getElementById("tempTable").deleteRow(indexDelAgent); , но это не работает. Я не хочу, чтобы данные моей таблицы помещались в какой-либо массив.Мне просто нужно удалить всю строку при нажатии на значок удаления.

Ответ №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>

1. но мой заголовок удаляется, когда я нажимаю на кнопку удаления : (

2. @Ашвинкарки : indexDelAgent = parseInt($(this).index('.deleteIcon') 1)

3. @AshwinKarki : вы должны добавить количество заголовков (строк) с индексом, поскольку он включает в себя строки

4. но мой код заработал после добавления document.getElementById(«TempTable»). deleteRow(индекс 1); ранее это было просто удаление заголовка. Почему это происходит так?

5. @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>

1. проблема в том, что в моем коде это не удаляется … мне нужно удалить строку по значению console.log(indexDelAgent); которое там 4,5,6. Пожалуйста, вы можете просто просмотреть это таким образом?