如何在不使用jQuery的情况下使用onclick事件删除JS中的表行

Question

const btnToDoInfo = document.getElementById("btnToDoInfo");
var arrayToDo = [];
btnToDoInfo.addEventListener("click", ToDoFunc);
function ToDoFunc()
{
var ToDoTask = document.getElementById("Task-Dropdown").value;
var ToDoModCode = document.getElementById("ModuleCode-Dropdown").value;
var ToDoDescription = document.getElementById("Description").value;
const d = new Date();
let timeStamp = d.getTime();
const arrayOfObjects = 
[{TaskName: ToDoTask, ToDoModCode: ToDoModCode, Description: ToDoDescription ,UniqueID: timeStamp}]
arrayToDo.push(arrayOfObjects);
//Add task and Module to the table 
var ToDoTable = document.getElementById("ToDo-Table");
var rowCnt = ToDoTable.rows.length -1; 

var row = document.createElement("tr");
row = ToDoTable.insertRow(rowCnt);
row.setAttribute("onclick","myFunction(this)");
console.log(row.attributes);
var ModuleCodeRow = row.insertCell(0);
var TaskRow = row.insertCell(1);
var DescriptionRow = row.insertCell(2);
var TimeRow = row.insertCell(3);
TaskRow.innerHTML = ToDoTask;
ModuleCodeRow.innerHTML = ToDoModCode;
DescriptionRow.innerHTML = ToDoDescription;
}

function myFunction(x){
var i = x.rowIndex
document.getElementById("ToDo-Table").deleteRow(i); 
}

HTML以下是我针对中特定表格的HTML

<h1>To do list</h1>
<label for = "ModuleCode-Dropdown">Module Code</label>
<select name="Module-Codes" id = "ModuleCode-Dropdown"></select><br><br>

<label for = "Task-Dropdown">Task</label>
<select name="Task" id = "Task-Dropdown"></select><br><br>
<label for = "Description">Description</label>
<input type="text" id = "Description"><br><br>
<input type = "button" class = "add" id = "btnToDoInfo" value = "Add"><br><br>
<!--A table where the output is shown-->
<table class = "ToDo" id = "ToDo-Table">
<tr>
<th>Module Code</th>
<th>Task</th>
<th>Description</th>
<th>Due Date</th>
</tr>
<tr>
<td id = "ModuleCode-Content"></td>
<td id = "Task-Content"></td>
<td id = "Description-Content"></td>
<td id = "DueDate-Content"></td>
</tr>
</table>

我动态地创建了具有onclick属性的表行，但当我运行代码时，我收到了以下错误

未捕获的ReferenceError:在HTMLTableRowElement.onclick中未定义myFunction。我无法使用jQuery。

我希望我单击的表行被删除。

Answer 1

您应该向行元素添加一个事件侦听器，如下所示：

row.addEventListener("click", myFunction);

并将myFunction更改为：

function myFunction() {
this.remove();
}

Answer 2

尝试查找元素并在变量中选择它，例如：

var element = document.querySelector('#id');

然后使用将其移除

element.parentNode.removeChild(element);