JavaScriptで要素を削除するリンクを作成する
ここに複数の段落があるとします:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
それぞれの段落の最後に、その段落を削除するリンクを追加しましょう。
まずは単にリンクを追加する機能を実装します:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
}
次に、リンクをクリックすると対応する段落が削除されるようにしましょう:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault();
});
}
ulタグが与えられています。各liタグの末尾に、そのliをリストから削除するリンクを追加してください。
HTMLテーブルが与えられています。このテーブルに新たな列を追加し、各行に対してその行を削除するリンクを配置してください。