先ほど投稿したDOMの家族要素に追加や削除の機能をつけてみました。
備忘録として、書き込みさせていただきます。
※最初の子要素を消すと、複数一気に消えてしまう現象を何とかしたいです。
改善案がございましたらご教授いただけますと幸いです。
DOMcreateDelete.html
<br>
<button id="del1">最初の子を消去</button>
<button id="del2">最後の子を消去</button>
<br>
<button id="pre">頭に子を追加</button>
<button id="ape">後ろに子を追加</button>
<br>
<body class="first">
body=さらに先祖
<div class="ancestor">
ancientor=先祖
<div class="parent">
parent=親要素
<div class="prev">prev=直前にある兄弟要素</div>
<div class="base">
base=主とする要素＜＝
<div id ="ch1" class="child">ch1=子要素1</div>
<div id ="ch2" class="child">ch2=子要素2</div>
<div id ="ch3" class="child">ch3=子要素3</div>
</div>
<div class="next">next=直後にある兄弟要素</div>
</div>
</div>
<script>
//ボタンの要素を取得
let but = document.querySelectorAll("button");
console.dir(but);
//自分を取得
let me = document.querySelector(".base");
console.dir(me);
//親が兄弟を取得
let bros = document.querySelector(".parent").children;
console.dir(bros);
//親が自分を取得
console.dir(bros[1]);
//親の要素を取得
let per = document.querySelector(".base").parentElement;
console.dir(per);
//前の兄弟を取得
let bro1 = document.querySelector(".base").previousElementSibling;
console.dir(bro1);
//後ろの兄弟を取得
let bro2 = document.querySelector(".base").nextElementSibling;
console.dir(bro2);
//子のリストを取得
let chList = document.querySelector(".base").children;
console.dir(chList);
//子の最初を取得
let firCh = document.querySelector(".base").firstElementChild;
console.dir(firCh);
//最後の子を取得
let lasCh = document.querySelector(".base").lastElementChild;
console.dir(lasCh);
//先祖を取得
let anc = document.querySelector(".base").closest(".ancestor");
console.dir(anc);
//さらに先祖を取得
let anc2 = document.querySelector(".base").closest("body");
console.dir(anc2);
//新しく子を２つ生成
let newChi = document.createElement("div");
newChi.textContent = "appendChildでできた自分の子です";
me.appendChild(newChi);
let newChi2 = document.createElement("div");
newChi2.textContent = "appendChildでできた自分の子２です";
me.appendChild(newChi2);
//新しく兄弟を生成
let newBro = document.createElement("div");
newBro.textContent="appendchiledでできた兄弟です";
per.appendChild(newBro);
//兄弟（bro1)の子を生成
let broChi = document.createElement("div");
broChi.textContent="appendchiledでできたbro1の子です";
bro1.appendChild(broChi);
//兄弟（bro2)の子を生成
let broChi2 = document.createElement("div");
broChi2.textContent="appendchiledでできたbro2の子です";
bro2.appendChild(broChi2);
//関数1：最初の子を削除
const firChDel =()=>{
let target2 = document.querySelector(".base").firstElementChild;
target2.remove();
alert('最初の子をremoveで削除しました');
};
//無名関数：関数１を呼ぶ
let del1 = document.querySelector("#del1");
console.dir(del1);
del1.addEventListener("click", () => firChDel());
//関数２：最後の子を削除
const lasChDel =()=>{
let target = document.querySelector(".base").lastElementChild;
console.dir(target);
target.remove();
alert('最後の子をremoveで削除しました');
};
//無名関数：関数２を呼ぶ
let del2 = document.querySelector("#del2");
console.dir(del2);
del2.addEventListener("click", () => lasChDel());
//関数３：自分の先頭に子供を作る
const newFirCh =()=>{
let target3 = document.querySelector(".base").firstElementChild.parentElement;
let newCh1 = document.createElement("div");
newCh1.textContent="prependで先頭に新しく子を作りました";
console.dir(newCh1);
target3.prepend(newCh1);
alert('先頭に子を産みだしました');
};
//関数３呼び出し
let pre = document.querySelector("#pre");
console.dir(pre);
pre.addEventListener("click", () => newFirCh());
//関数4：自分の末尾に子供を作る
const newLasCh =()=>{
let target4 = document.querySelector(".base").lastElementChild;
let newCh2 = document.createElement("div");
newCh2.textContent="appendで末尾に新しく子を作りました";
console.dir(newCh2);
target4.append(newCh2);
alert('末尾に子を産みだしました');
};
//関数4呼び出し
let ape = document.querySelector("#ape");
console.dir(ape);
ape.addEventListener("click", () => newLasCh());
</script>
</body>