jQueryのを使用して、ユーザーにメッセージを表示した後、動的テーブルの特定の行を削除する方法？

ヴァシリス：

以下、私はjQueryのを使用して、テーブルに、各行の削除ボタンを、ユーザがモーダルで入射する特定の入力値を追加するために使用していることをコードである$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover")私は実際にはテーブル内の所望の行を削除するに苦しんでいますが、また、生成されます。

if ($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== '') {
      var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, 'images/');
      let row = '<tr> <td class="align-middle">' + "image" + '</td> <td class="align-middle">' + $("#insert-name").val() + '</td> <td class="align-middle">' + $("#insert-surname").val() + '</td> <td class="align-middle">' + "edit" + '</td> <td class="align-middle">' + "delete" + '</td> </tr>'
      $('tbody').append(row);

      $('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image' class='image' data-toggle='popover-hover'>");

      $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover").on('click', function() {});

      $('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
        $("#delete-modal").modal('show');
        $("#btnDeleteConfirmation").on('click', function() {
            $(this).parents('tr').remove();
            $("#delete-modal").modal('hide');
          });
      });
    }
  });

テーブルや削除モーダルのためのHTMLコードは次のとおりです。

<table class="table table-bordered">
        <thead class="thead-dark">
          <tr>
            <th scope="col">Image</th>
            <th scope="col">Name</th>
            <th scope="col">Surname</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
          </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
</table>

<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle">Delete Confirmation</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Are you sure you want to delete this item?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" id="btnDeleteDismiss">No</button>
          <button type="button" class="btn btn-primary" id="btnDeleteConfirmation">Yes</button>
        </div>
      </div>
    </div>
  </div>

特定の行の削除ボタンをクリックすると、モーダルは、#delete-modalそれらが所望の行を削除したい場合は、モーダルをユーザーがクリックするのyesがいる場合にのみ、確認するようユーザーに促している表示されている#btnDeleteConfirmation行が削除されなければなりません。この私の試みは以下の通りですが、それはない実際に削除は何もないと私は確信して私が間違ってやっているものではありませんよ。

$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
        $("#delete-modal").modal('show');
        $("#btnDeleteConfirmation").on('click', function() {
            $(this).parents('tr').remove();
            $("#delete-modal").modal('hide');
          });
      });

すべてのヘルプははるかに高く評価されるだろう。

カーン氏：

あなたは取っているこの参照が間違っています。btnDeleteConfirmationは、それゆえ、親TRを持って働いていないdoesnot。何が必要、この行のこの参照を格納することです。

$('td:contains("delete")').html("<i class='far fa-trash-alt' id='btnDelete'></i>").addClass("text-center delete delete:hover").on('click', function() {
let deleteRef = this;

そして、あなたは親（「TR」）とそれを渡すとき。のremove（）、それは動作しなければなりません！