xボタンがクリックされた要素に基づいて特定のli要素を削除しようとしています。現在、エラーが発生しています
"bZMQWNZvyQeA：42 Uncaught TypeError：Failed to execute'removeChild 'on'Node'：parameter 1 is not of type'Node '。"
これはパラメータがnullであることを意味する可能性があることを認識していますが、これは私には意味がありません。Chrome開発ツールは、onClick属性がremoveItemを正しく実行し、idNameをパラメーターとして渡していることを示しています。これはどのように機能していませんか？
var note = 0;
function saveInfo() {
var idName = "note" + note;
//assign text from input box to var text, and store in local storage
var input = document.getElementById('input').value;
var text = localStorage.setItem(note, input);
var list = document.createElement("li");
var node = document.createTextNode(input);
var removeBtn = document.createElement("button");
list.setAttribute("id", idName);
removeBtn.setAttribute("onClick", `removeItem(${idName})`);
removeBtn.innerHTML = "X";
list.appendChild(node);
list.appendChild(removeBtn);
document.getElementById("output").appendChild(list);
note += 1;
}
function removeItem(name) {
var parent = document.getElementById("output");
var child = document.getElementById(name);
parent.removeChild(child);
}
私のコメントでは、からのクリックイベントのバブリングを聞くことをお勧めしますremoveBtn。この場合、必要なのはonclick、コードから属性割り当てロジックを削除し、代わりにremoveButtonクラスなどの識別可能なプロパティを指定することだけです。それにクラスを与えましょうdelete-button：
var removeBtn = document.createElement("button");
removeBtn.classList.add('delete-button');
removeBtn.type = 'button';
removeBtn.innerHTML = 'X';
次に、#output実行時に存在することが保証されているレベルでクリックイベントをリッスンできます。イベントが発生したら、イベントターゲットに識別可能なプロパティがあるかどうかを確認するだけです。たとえば、remove-buttonこの場合はクラスです。
output.addEventListener('click', function(e) {
// GUARD: Do nothing if click event does not originate from delete button
if (!e.target.matches('.remove-button')) {
return;
}
// Delete parent node
e.target.closest('li').remove();
});
クリックイベントが削除ボタンから発生したものでない場合は、return他に何もしません。それ以外の場合は、ボタンがクリックされたことがわかり、を使用してElement.closest()、.closest('li')最も近い<li>親ノードを取得して削除できます。
IE11を絶対にサポートする必要がある場合（これはサポートしませんElement.closest()）、削除ボタンが要素の直接の子であると仮定してNode.parentNode、<li>要素にアクセスして削除することもできます<li>。
// Delete parent node
e.target.parentNode.remove();
以下の概念実証を参照してください。
var rows = 10;
var output = document.getElementById('output');
for (var i = 0; i < rows; i++) {
var list = document.createElement('li');
var node = document.createTextNode('Testing. Row #' + i);
var removeBtn = document.createElement("button");
removeBtn.classList.add('remove-button');
removeBtn.type = 'button';
removeBtn.innerHTML = 'X';
list.appendChild(node);
list.appendChild(removeBtn);
output.appendChild(list);
}
output.addEventListener('click', function(e) {
// GUARD: Do nothing if click event does not originate from delete button
if (!e.target.matches('.remove-button')) {
return;
}
e.target.closest('li').remove();
});<ul id="output"></ul>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加