簡単なDOM操作においてNodeの追加と削除を条件分岐で制御したい

Question

前提

簡単なノードの追加などで理解を深めようとしている

実現したいこと

ボタンタグをクリックした時にdivタグの中の要素の最後のchildNodeが「こんばんは」が存在しない時に追加して、存在するときは削除する指定にしたい

発生している問題・エラーメッセージ

ボタンをクリックするたびに、「こんばんは」が追加されてしまう。

該当のソースコード

--html--
<button>Run</button>

    <div id="container">
      <p>おはよう</p>
      <p>こんにちは</p>
    </div>
--/html--

--js--
 document.querySelector('button ').addEventListener('click', () => {
    const item2 = document.createElement('p');
    item2.textContent = 'こんばんは';
    const ds = document.getElementById('container');

    if (ds.lastChild !== item2) {
      const ul = document.getElementById('container');
      ul.appendChild(item2);
    } else {
      const ul = document.getElementById('container');
      ul.removeChild(item2);
    }
  });
--/js--

試したこと

dsを定義して、条件分岐でdsのlastChildがitem2だった場合、lastNodeを削除。なかった場合に追加と指定した。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

if (ds.lastChild !== item2) {

item2は今作ったばかりのノードなので、ds.lastChildとイコールになることはあり得ません。

if (ds.lastChild.textContent !== item2.textContent)では？

削除も、

ul.removeChild(item2);

item2はHTML上に無いノードなので、削除出来ません（もともと存在しない）。
ul.removeChild(ul.lastChild)でしょう。

どちらも、「ノード」と「ノードの中身の文字列」の区別が付いていないことによる間違いです。

あと、dsとulという同じ値を持つ変数が2つありますね。

Comments

[nao__funky]

ご丁寧な回答ありがとうございます。とても勉強になり、問題なく実装できました。こちら別のとこでアウトプットさせていただきます。