先ほど投稿した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>