表の行の削除が出来ません
Q&A
Closed
deleteButtonを押すとその行が削除される、というものを作りたいのですが、onclick時の関数delBut()がうまく作れず、削除が実行されません。
出来たら.remove();を使う方法でご教授お願い致します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>年表作成</title>
<style>
body {
width: 850px;
}
table td {
background: #eee;
}
table tr:nth-child(even) td {
background: #fff;
}
#titleRow {
text-align: center;
background-color: rgb(252, 227, 196);
}
#titleYear {
width: 100px;
}
#titleEvent {
width: 600px;
max-width: fit-content;
}
#titleButton {
width: 150px;
}
</style>
</head>
<body>
<h1>年表作成</h1>
<input id="date" type="date" name="calendar" max="9999-12-31" required>
<input id="event" size=90 placeholder="出来事を入力してください" required>
<button id="insertEventButton" onclick="insertEvent()">決定</button>
<br>
<br>
<table id="eventTable" border="1">
<tr id="titleRow">
<td id="titleYear">年月日(西暦)</td>
<td id="titleEvent">出来事</td>
<td id="titleButton">操作ボタン</td>
</tr>
</table>
<script>
let i=-1;
insertEvent=()=>{
let date = document.getElementById("date").value;
let event = document.getElementById("event").value;
if(date=="" && event==""){
alert("日付と出来事を入力してください。");
}else if(date==""){
alert("日付を入力してください。");
}else if(event==""){
alert("出来事を入力してください。");
}else{
document.getElementById("date").value="";
document.getElementById("event").value="";
let table = document.getElementById("eventTable");
let tr = document.createElement("tr");
i++;
tr.id="tr"+i;
let tdDate = document.createElement("td");
tdDate.innerText = date;
let tdEvent = document.createElement("td");
tdEvent.innerText = event;
tr.appendChild(tdDate);
tr.appendChild(tdEvent);
let tdButton = document.createElement("td");
let deleteButton = document.createElement("button");
deleteButton.id = "delBut";
deleteButton.innerText = "削除";
deleteButton.onclick = delBut();
tdButton.appendChild(deleteButton);
tr.appendChild(tdButton);
table.appendChild(tr);
console.log(tr.id);
}
}
const delBut=()=>{
}
</script>
</body>
</html>
1
