Javascript DOMでul内のliを削除する removeChild
以下の続きです
今回は削除について
kirikko-scondcube.hatenablog.com
kirikko-scondcube.hatenablog.com
既存のul-liの要素から指定したli(今回はitem1 )を削除する記述
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>run</button>
<ul>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
</ul>
<script src="js/main.js"></script>
</body>
</html>
js
`use strict`;
{
document.querySelector('button').addEventListener('click', ()=>{
const item1 = document.querySelectorAll('li')[1];
// item1.remove();
// このremove()は一部の古いブラウザで使えないことがあるので、もしくは↓
// 親Node.removeChild(削除するNode)
document.querySelector('ul').removeChild(item1);
})
}
item1.remove();でも消せるが、
document.querySelector('ul').removeChild(item1);
こちらの方が良さそうでした。