0
私は、リストに食品を追加するためのJavaScriptコードを書いています。行のすべての食品について、削除ボタンがあります。しかし、私がボタンを押しても何も起こらない。コードでエラーが見つかりません。私はボタンをnewRow.innerHtml + = ... id = "delete"で定義しました。私はdeleteRow（要素）メソッドも持っていますが、何らかの理由で削除されません。誰かが問題を見つけるのを助けることができますか？ JavaScriptで行を削除する
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 2px;}
tr:nth-child(even) {
background-color: #dddddd;}
</style>
<body>
<h3>Foods</h3>
<table id="table">
<tr>
<th>Name</th>
<th>Ingredients</th>
<th>Meat</th>
<th>Vegetarian</th>
<th>Vegan</th>
</tr>
</table>
</section>
<br><br>
<!-- FORMULAR -->
<section>
<h3>New food</h3>
<p>Name: <input type="text" id="name" />
<p>Ingredients: <input type="text" id="ingredients" />
<br><br>
<input type="radio" id="meat" name="select" value="meat" />
<label for="meat">Meat</label>
<input type="radio" id="veg" name="select" value="vegetarian" />
<label for="veg">vegetarian</label>
<input type="radio" id="vegan" name="select" value="vegan" />
<label for="vegan">vegan</label>
<p>Passwort: <input type="password" id="passwd" />
<button id="add" onclick="Add()">Add</button>
<script>
let table = document.getElementById("table");
document.addEventListener('DOMContentLoaded', registerCallbacks);
function registerCallbacks(){
function Add() {
var newRow = document.createElement('tr');
var name = document.getElementById("name").value;
var ingredients = document.getElementById("ingredients").value;
var pw = document.getElementById("passwd").value;
var rObj = document.getElementsByName("select");
var vegetarian = rObj[1].checked;
var meat = rObj[0].checked;
var vegan = rObj[2].checked;
newRow.innerHTML += "<td>" + name + "</td><td>" + ingredients +"</td><td>" + meat+ "</td><td>" + vegetarian +"</td><td>" + vegan + "</td><td>" + '<button id="delete" onclick="deleteRow(this)">Delete Row</button>'
document.getElementById("table").appendChild(newRow);
}
var addButton = document.getElementById('add');
addButton.addEventListener('click', function(evt){Add(); evt.preventDefault();});
var deleteButton = document.getElementById('delete');
deleteButton.addEventListener('click', function(evt){deleteRow(this); evt.preventDefault();});
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
}
</script>
</section>
</article>
</main>
<!-- FOOTER -->
<footer>
<p>© Copyright 2017</p>
</footer>
</div>
</body>
</html>
動作するはずです。私は正しい変数が 'this'であると思われますので、クリックハンドラでは' deleteRow（this） 'と書くことができます – Nick
エラーが発生していません" Uncaught ReferenceError：deleteRowが定義されていません " – Marc
ハンドラは複数の方法で追加されます。私はここでそれを修正した：https://jsfiddle.net/feLgharu/ – dersvenhesse