JavaScriptによるHTMLの操作は追加だけではなく、削除や置き換え、複製など様々な操作が可能です。これまで学んできた追加、イベントを使いながら、新たに削除を勉強していきます。
要素の削除 .remove()
まずは削除から勉強していきましょう。下記のコードではリスト内にある削除ボタンを押すと、そのリストが削除されるプログラムを組んでいます。
// remove.html
<ul class="list">
<li>テスト1<div class="button button--delete">削除</div></li>
<li>テスト2<div class="button button--delete">削除</div></li>
<li>テスト3<div class="button button--delete">削除</div></li>
<li>テスト4<div class="button button--delete">削除</div></li>
<li>テスト5<div class="button button--delete">削除</div></li>
<li>テスト6<div class="button button--delete">削除</div></li>
<li>テスト7<div class="button button--delete">削除</div></li>
<li>テスト8<div class="button button--delete">削除</div></li>
</ul>
<button class="button button--add">追加</button>
<script>
const listItem = document.querySelectorAll(".list li");
for( let i = 0; i < listItem.length; i++) {
const itemDeleteButton = listItem[i].querySelector('.button--delete');
itemDeleteButton.addEventListener("click", () => {
listItem[i].remove();
})
}
</script>プログラムの流れを説明すると下記の通りとなります。
- .listの子要素liを全て変数listItemに代入
- 変数listItemをfor文でループ
- ループ内処理：i番目のlistItem、子要素の.button–deleteを変数deleteButtonに代入
- ループ内処理：変数deleteButtonに、clickイベントでi番目のlistItemを削除する処理を関連づける
複数の要素に同じイベントを関連づけるには、あらかじめ変数に代入した要素をループ処理し、その中でaddEventListenerで関連づけをします。
この記述方法は同じ機能を複数の要素に関連づけるときによく使いますので覚えておきましょう。
.remove() は指定された要素を削除するメソッドです。引数はなくただ要素に対して下記のように記述するだけです。
要素.remove()追加・削除ができるリスト
次に応用編として追加と削除ができるプログラムを書きます。
// remove-add.html
<ul class="list">
<li>テスト1<div class="button button--delete">削除</div></li>
<li>テスト2<div class="button button--delete">削除</div></li>
<li>テスト3<div class="button button--delete">削除</div></li>
</ul>
<button class="button button--add">追加</button>
<script>
const list = document.querySelector(".list");
const listItem = list.children;
for( let i = 0; i < listItem.length; i++) {
const itemDeleteButton = listItem[i].querySelector('.button--delete');
itemDeleteButton.addEventListener("click", () => {
listItem[i].remove();
})
}
const addButton = document.querySelector(".button--add");
addButton.addEventListener("click", () => {
const listItemElement = document.createElement("li");
listItemElement.innerHTML = "テスト<div class=\"button button--delete\">削除</div>";
list.appendChild(listItemElement);
});
</script>追加のボタンを設置して押すたびに.list要素の末尾にli要素を追加しています。これでボタンをクリックするたびにli要素がどんどんと増えていくのですが、実はこのままだと追加したli要素の削除ボタンは動作しません。
この記述の場合、ブラウザがページを読み込んだ時点でHTML上の.button–deleteに削除する関数を関連づけていますが、後で追加ボタンを押して追加した要素には関連づけがされていない状態となっているからです。
そのため、liタグを生成するたびに削除ボタンの関数を関連づけする必要があります。プログラムを下記のように書き換えます。
// remove-add-complete.html
<ul class="list">
<li>テスト1<div class="button button--delete">削除</div></li>
<li>テスト2<div class="button button--delete">削除</div></li>
<li>テスト3<div class="button button--delete">削除</div></li>
</ul>
<button class="button button--add">追加</button>
<script>
const list = document.querySelector(".list");
const listItem = list.children;
const deleteButton = ".button--delete"
for( let i = 0; i < listItem.length; i++) {
const itemDeleteButton = listItem[i].querySelector(deleteButton);
itemDeleteButton.addEventListener("click", () => {
listItem[i].remove();
})
}
const addButton = document.querySelector(".button--add");
addButton.addEventListener("click", () => {
const listItemElement = document.createElement("li");
listItemElement.innerHTML = "テスト<div class=\"button button--delete\">削除</div>";
const itemDeleteButton =listItemElement.querySelector(deleteButton);
itemDeleteButton.addEventListener("click", () => {
listItemElement.remove();
})
list.appendChild(listItemElement);
});
</script>追加ボタンをクリックした際の処理で、追加するli要素の削除ボタンにクリックイベントの関連づけを行いました。これで追加したli要素も削除が可能になりました。
終わりに
ページ読み込み後の入力で追加した要素の関連づけは、初学者の方が一度は悩まれるポイントなのではないかと思います。（私も勿論ハマりました・・・）
こういう処理のひとつひとつを増やすことでプログラムのスピードも上がりますので、基礎はしっかり学んでおいて損はないのではと考えています。
この次の記事ではテキストの変更が可能なリストを作っていきます。
ここまで読んでくださり、ありがとうございました。
本記事で記述したコード
otoiron/web-dukuri-study | GitHub
制作協力
サムネイル制作：うみ Twitter
コメント