title: How to delete each DOM element separately
body: <p>I have a button that creates two input fields on click. They also generate a font awesome trash icon and when the user clicks on the icon the two fields must get deleted. Currently my code deletes all inputs when clicking on the font awesome icon, how can I make so that only those two that belong to the icon get deleted instead of all? Here is my attempt:</p>
  <pre><code>  createNewPricedRoundShareholder() {
        var newPlatformNameInputContainer = document.getElementById(
          &quot;round-shareholder-container&quot;
        );
  
        const newPlatformNameInput = document.createElement(&quot;input&quot;);
        newPlatformNameInput.classList.add(&quot;form-control&quot;);
        newPlatformNameInput.classList.add(&quot;input&quot;);
        newPlatformNameInput.classList.add(&quot;dynamic-input&quot;);
        newPlatformNameInput.placeholder = &quot;Username&quot;;
        newPlatformNameInput.setAttribute(&quot;type&quot;, &quot;text&quot;);
        newPlatformNameInput.setAttribute(&quot;name&quot;, &quot;username&quot;);
  
        newPlatformNameInputContainer.appendChild(newPlatformNameInput);
  
        var secondContainer = document.getElementById(
          &quot;round-investment-container&quot;
        );
  
        const newInitialOptionsPool = document.createElement(&quot;input&quot;);
        newInitialOptionsPool.classList.add(&quot;form-control&quot;);
        newInitialOptionsPool.classList.add(&quot;input&quot;);
        newInitialOptionsPool.classList.add(&quot;dynamic-input&quot;);
        newInitialOptionsPool.placeholder = &quot;Investment&quot;;
        newInitialOptionsPool.name = &quot;investment&quot;;
        newInitialOptionsPool.setAttribute(&quot;type&quot;, &quot;text&quot;);
        newInitialOptionsPool.setAttribute(&quot;name&quot;, &quot;investment&quot;);
        secondContainer.appendChild(newInitialOptionsPool);
        secondContainer.innerHTML += '&lt;i class=&quot;fas fa-trash&quot;&gt;&lt;/i&gt;';
  
        document.querySelectorAll(&quot;.fa-trash&quot;).forEach( 
        function(el){
             el.addEventListener('click', function() {
                    var investmentInput = document.querySelector(&quot;#round-shareholder-container&quot;);
          investmentInput.parentNode.removeChild(investmentInput);
  
          var usernameInput = document.querySelector(&quot;#round-investment-container&quot;);
          usernameInput.parentNode.removeChild(usernameInput)
             })
        }
  )
  </code></pre>
  <p>I also tried by getting each input target like that:</p>
  <pre><code>var A = el.target.parentNode;
  A.removeChild(A); 
  </code></pre>
  <p>That still didn't work</p>