title: Add/remove <li> element from the ul javascript
body: <p>I am new in JavaScript and still learning various things. Right now i'm stuck with adding and removing li elements from the list. I did the exercise just fine using jQuery, but now have difficulties with the pure JS version of the same task.</p>
  
  <p>The main idea is to add a new li element by clicking on the button, and remove the the element by clicking on the X button right next to it. I have tried using 'this' and other advices mentioned in similar questions here on Stackoverflow, but nothing worked for me. Could you, please, guide me what am I doing wrong?</p>
  
  <p>P.S. the adding function seems to be working in snippet, but console logs error: cannot read property 'addeventlistener' of null.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//declaring the variables
  var btn = document.getElementsByClassName('btn');
  var list = document.getElementById('list');
  var add = document.getElementById('add');
  
  //adding a new element to the list
  add.addEventListener('click', function(){
    var newElement = document.createElement('LI');
    list.appendChild(newElement);
    newElement.innerHTML= "I am a new element&lt;button class='btn'&gt;X&lt;/button&gt;";
  });
  
  //removing the clicked element
  btn.addEventListener('click', function(){
    list.parentNode.removeChild(this);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul li {
    decoration: none;
    display: block;
    margin-top: 1em;
    text-align: center;
    font-family:  'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    font-size: 18px;
  }
  
  #add {
    background-color: black;
    color: white;
    border: none;
    width: 280px;
    font-color: white;
    border-radius: 8px;
    font-size: 16px;
    padding: 15px;
    outline: none;
    text-align: center;
    margin: 20px auto;
    display: block;
  }
  
  #add:hover {
    background-color: #28364d;
    color: white;
    border: none;
    outline: none;
  }
  
  #add:active {
    position: relative;
    bottom: 2px;
  }
  
  .btn{
    margin-left: 10px;
    border-radius: 10px;
    background-color: #000;
    color: white;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: sans-serif;
  }
  
  .btn:active {
  position: relative;
  bottom: 2px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
        &lt;ul id="list"&gt;
          &lt;li class="element"&gt;I am a new element&lt;button class="btn"&gt;X&lt;/button&gt;&lt;/li&gt;
          &lt;li class="element"&gt;I am a new element&lt;button class="btn"&gt;X&lt;/button&gt;&lt;/li&gt;
          &lt;li class="element"&gt;I am a new element&lt;button class="btn"&gt;X&lt;/button&gt;&lt;/li&gt;
          &lt;li class="element"&gt;I am a new element&lt;button class="btn"&gt;X&lt;/button&gt;&lt;/li&gt;
          &lt;li class="element"&gt;I am a new element&lt;button class="btn"&gt;X&lt;/button&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;button id="add"&gt;Add an element to the list&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>