点击按钮无法删除HTML表格对应行、控制台无报错如何解决？

核心问题1：删除按钮点击事件属性拼写错误 #

你在loadData函数中拼接删除按钮的HTML代码时，将点击事件的标准属性名onclick错写为了clickon，浏览器会将clickon识别为无特殊意义的自定义属性，不会绑定点击执行逻辑，因此点击按钮没有反应也不会触发报错。

修复代码： #

找到loadData函数中拼接按钮的对应行，将属性名修正即可：

// 修正前
<button class='col-6 btn-xs btn-danger btn-operation' clickon='DeleteItem(" + i + ")'>
// 修正后
<button class='col-6 btn-xs btn-danger btn-operation' onclick='DeleteItem(" + i + ")'>

次要问题：doClear函数变量作用域错误 #

你在doSave函数内部定义了txtFirstName等DOM元素变量，这些都是局部变量，doClear函数中直接调用会触发未定义报错，需要在doClear中重新获取对应DOM元素：

修复代码： #

function doClear() {
    // 重新获取DOM元素
    var txtFirstName = document.getElementById("txtFirstName");
    var txtLastName = document.getElementById("txtLastName");
    var txtAddress = document.getElementById("txtAddress");
    var txtEmail = document.getElementById("txtEmail");
    var txtContact = document.getElementById("txtContact");
    var txtBirthDate = document.getElementById("txtBirthDate");
    txtFirstName.style = "";
    txtLastName.style = "";
    txtAddress.style = "";
    txtEmail.style = "";
    txtContact.style = "";
    txtBirthDate.style = "";
}

完成以上两处修改后，删除功能即可正常使用。

内容的提问来源于stack exchange，提问作者jackhelsi