title: I can't set JS removeChild to work properly
body: <p>sorry for my silly questions and bad explanation</p>
  <p>Currently I’m learning JS and I couldn’t understand what went wrong.</p>
  <p>I'm trying to make new <p> list when onlick the button, and I want to delete it when onclick the X</p>
  <p>It does work in someways, but it only works when there are more than 1 of P tags. So it's impossible to remove everything which is submitted</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var list = document.querySelector("#list");
  var text = document.querySelector("#write");
  var btn = document.querySelector("#submit");
  
  btn.addEventListener("click", add);
  
  function add(){
      var newP = document.createElement("p");
      var newUl = document.createElement("ul");
      var newLi = document.createElement("li");
      var newText = document.createTextNode(text.value);
      var delbtn = document.createElement("span");
      delbtn.setAttribute("class", "del")
      var delText = document.createTextNode("X");
      var delbtns = document.querySelectorAll(".del")
      list.appendChild(newP);
      newP.appendChild(newUl);
      newUl.appendChild(newLi);
      newLi.appendChild(newText);
      newP.appendChild(delbtn);
      delbtn.appendChild(delText);
      text.value = ""
      text.focus();
      
      for (var i = 0; i &lt; delbtns.length; i++){
          delbtns[i].addEventListener("click", function () {
              if(this.parentNode.parentNode)
              this.parentNode.parentNode.removeChild(this.parentNode)
          });
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;style&gt;
          p{
              width: 80%;
          }
          .del{
              border: 1px solid #999;
              display: flex;
              flex-basis: 200;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;hello world&lt;/h1&gt;
      &lt;form action=""&gt;
          &lt;input type="text" id="write" /&gt;
          &lt;input type="button" id="submit"/&gt;
      &lt;/form&gt;
      &lt;div id="list"&gt;&lt;/div&gt;
      &lt;script src="index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>