Javascript 如何提示询问用户是否要删除所选行的模式？（jQuery）

我需要制作一个程序，从一个模态中获取输入，并将其放入一个表中。每一行都需要有一个编辑和删除图标（使用Fontsome）。关于这个问题的上下文，我主要关注删除图标/按钮。当前，删除图标需要是一个按钮，一旦按下该按钮，将显示一个模式，询问用户是否确定要删除行中的信息。模式将包含两个按钮，用户可以选择执行两个操作之一（Yes按钮-删除行及其所有内容；No按钮-仅关闭模式）。下面我给出了jQuery代码（需要用jQuery编写），到目前为止，我的代码将图标显示为按钮，单击delete图标/按钮后，行将被删除，但只有在那时才会显示模式。（当前模式没有任何功能，即没有任何按钮可以执行任何操作）

jQuery：

function deleteData(btnDelete) {
  $(btnDelete).parents("tr").remove();
}

function openModal() {
  $('#modalDelete').show();
}

//function that adds input values to the table
function addToTable() {
  //add tbody tag if one is not present
  if($("#inputTable tBody").length == 0) {
    $("#inputTable").append("<tbody></tbody>");
  }

  $(function() {
    $('#insertImage').on('change', function()
    {
      var filePath = $(this).val();
      console.log(filePath);
    });
  });

  //append inputs to the Table
  $("#inputTable tbody").append(
    "<tr>" +
      "<td>" +  + "</td>" +
      "<td>" + $("#addName").val() + "</td>" +
      "<td>" + $("#addSurname").val() + "</td>" +
      "<td>" +
        "<button type='button' " +
          "class='btn'><i class='fas fa-user-edit' id='pencilIcon'></i></button>" +
      "<td>" +
        "<button type='button' " +
          "onclick='deleteData(this); openModal();'" +
          "class='btn'><i class='fas fa-dumpster' id='dumpsterIcon'></i></button>" +
        "</button>" +
      "</td>" +
    "</tr>"
  );


}

//add the inputed content to the table
$("#addToTable").click(function(){
  addToTable();
});

函数删除数据（btnDelete）{
$（btnDelete）.parents（“tr”）.remove（）；
}
函数openModal（）{
$（'#modalDelete'）.show（）；
}
//向表中添加输入值的函数
函数addToTable（）{
//如果没有车身标签，则添加车身标签
如果（$（“#可输入的tBody”）。长度==0）{
$（“#可输入”）。追加（“”）；
}
$（函数（）{
$（'#insertImage'）。在（'change'，function（）上
{
var filePath=$（this.val（）；
log（文件路径）；
});
});
//将输入追加到表中
$（“#可输入的tbody”）.append(
"" +
"" +  + "" +
“”+$（“#addName”）.val（）+“”+
“+$”（“#添加姓氏”）.val（）+”+
"" +
"" +
"" +
"" +
"" +
"" +
""
);
}
//将输入的内容添加到表中
$（“#添加表”）。单击（函数（）{
可添加（）；
});

HTML（表格）：

向表中添加数据
&时代；
插入图像
名称
姓
添加到表中

HTML（删除模式）：

&时代；
您确定要删除吗

对
不

---

任何帮助都将不胜感激

这里是一个纯javascript解决方案：

var delete = confirm("Are you sure you want to delete this row?");
if (delete ) { 
  //code to delete
}

对于初学者，将此“onclick='deleteData（this）；openModal（）；””更改为“onclick=”“openModal（）；”"

  <div class="modal" tabindex="-1" role="dialog" id="modalDelete">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Yes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>

var delete = confirm("Are you sure you want to delete this row?");
if (delete ) { 
  //code to delete
}