title: Remove a specific element from among several elements of the same class when pressing the button on the same element
body: <pre><code>let add = document.querySelector(&quot;.add&quot;)
  add.onclick = function () {
      let input = document.querySelector(&quot;.input&quot;).value;
      let newTask = document.querySelector(&quot;.tasks&quot;)
      let newTxt = document.createElement(&quot;div&quot;)
      newTxt.className = &quot;newDiv&quot;
      let newP = document.createTextNode(input)
      newP.className = &quot;newInput&quot;
      let deletButton = document.createElement(&quot;button&quot;)
      let deletTxt = document.createTextNode(&quot;Delet&quot;)
      deletButton.className = &quot;deletButton&quot;
      deletButton.appendChild(deletTxt)
      newTxt.appendChild(newP)
      newTxt.appendChild(deletButton)
      newTask.appendChild(newTxt)
      deletButton.onclick = function () {
          removeEle = document.getElementsByClassName(&quot;.newDiv&quot;)
          removeEle.remove(removEle)
      }
  }
  </code></pre>
  <p>I create several divs with the same class name with the delete button for each div
  When I want to delete a particular div I select it using <code>querySelector</code></p>
  <p>But the first element is always deleted, not the div I want to delete</p>