删除动态创建的表行

Question

我正在尝试以下函数来创建表行并在点击函数时删除它们，以下是我尝试过的：

function CreateDelete()
{

            var table = document.getElementById('newbook');
            var tableBody = document.createElement('tbody');
            var row, columnUserId, columnCountingAreaID, columnDeleteRec;


            row = document.createElement('tr');
            columnUserId = document.createElement('td');
            columnUserId.appendChild(document.createTextNode("hi"));

            columnCountingAreaID = document.createElement('td');
            columnCountingAreaID.appendChild(document.createTextNode("there"));

            columnDeleteRec = document.createElement('td');
            var element = document.createElement("input");
            //Assign different attributes to the element. 
            element.setAttribute('type','button');
            element.setAttribute('name','X');
            element.setAttribute('value','X');               

            element.onclick = function() { 
                $('#newbook input[type="button"]').click    (function () {
 $(this).closest('tr').remove();});
            };

            row.appendChild(columnUserId);
            row.appendChild(columnCountingAreaID);
            columnDeleteRec.appendChild(element);
            row.appendChild(columnDeleteRec);

            tableBody.appendChild(row);
            table.appendChild(tableBody);
}

问题在于它没有删除行 onclick 操作。 谁能告诉这里做错了什么。

Answer 1

单击行时您正在绑定事件

$('#newbook input[type="button"]').click(function () {
 $(this).closest('tr').remove();
});

这应该在您的代码末尾并使用 element.onclick 删除绑定事件

Answer 2

您只需将 onclick 处理程序更改为：

element.onclick = function() {                   
    $(this).closest('tr').remove();
};