title: JavaScript Removing Elements Dynamically! removeChild
body: <p>Technology I am using is materialize and vanilla js. I've created a materialize button that opens a model. within the model is a form that takes user input, then places the input text onto the main page, when the Submit button is triggered. then I have a button that should remove/delete the input posted. So the issue I'm having is that the JavaScript linked to the button which should delete/removeChild isn't working. please help :)</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>// ----------------Models Materialize Framework----------------
  document.addEventListener('DOMContentLoaded', () =&gt; {
      var elems = document.querySelectorAll('.modal');
      var instances = M.Modal.init(elems);
    });
  
  
  
  
  //Delete From The Dom
  const delExerciseBtn = document.querySelector('.del-exercise-btn');
  
  delExerciseBtn.addEventListener('click', (e) =&gt; {
  if(e.target.className == 'delete'){
    const h6 = e.target.parentElement;
    delExerciseBtn.removeChild(h6);
  }
  
  });
  
  // Add User's To the Dom.
  const addExerciseDom = document.querySelector('.exercise-dom');
  const exerciseForm = document.querySelector('.exercises-form');
  const disabledExersiceBtn = document.querySelector('.disabled-exersicebtn');
  
  
  exerciseForm.addEventListener('submit', (e) =&gt; {
  e.preventDefault();
  
    // Get Input Value
    const value = exerciseForm.querySelector('input[type="text"]').value;
  
    // Create Elements
    const h6 = document.createElement('h6');
    
    // Add Content
    h6.textContent = value;
    
    // Append To Dom
    addExerciseDom.appendChild(h6);  
  
    //Disable Btn
    disabledExersiceBtn.setAttribute('disabled', 'disabled');
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     
        &lt;title&gt;&lt;/title&gt;
  
        &lt;!-- Google icons --&gt;
        &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet"&gt;
  
        &lt;!-- Compiled and minified CSS --&gt;
        &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
    
        &lt;!-- Sytle.css --&gt;
        &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
        
      
  &lt;/head&gt;
  &lt;body&gt;
     
  &lt;!----- user's input -------&gt;
  &lt;div class="row"&gt;
    &lt;div class="col s12 center valign-wrapper center-align"&gt;
     &lt;div class=" exercise-dom delete"&gt; &lt;!--Users text input h6----&gt; &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Btn/Modals/form --&gt;
     &lt;div class="row"&gt;
     &lt;!-- Dom Btn --&gt;
      &lt;div class="col s12 center "&gt;
        &lt;a href="#exercise" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger disabled-exersicebtn"&gt;
          &lt;i class="material-icons white-text"&gt;add &lt;/i&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      
     &lt;!-- Modal/form --&gt;
    &lt;div class="modal modal-position" id="exercise"&gt;
     &lt;div class="modal-content"&gt;
  
      &lt;div class="row exercises-padding"&gt;
       &lt;form class="col s12 exercises-form" autocomplete="off"&gt;
         &lt;div class="input-field col s10"&gt; 
           &lt;i class="material-icons prefix"&gt;fitness_center&lt;/i&gt;
            &lt;input type="text" id="autocomplete-input"  class="autocomplete center"&gt;
              &lt;label for="autocomplete-input" &gt;&lt;h6&gt;Exercises&lt;/h6&gt;&lt;/label&gt;
         &lt;/div&gt;
         &lt;div class="modal-footer"&gt;
           &lt;input class="modal-close btn black" type="submit" value="Submit"&gt;
         &lt;/div&gt;
       &lt;/form&gt;
      &lt;/div&gt;     
     &lt;/div&gt;
    &lt;/div&gt;
    
    
  &lt;!-- Remove Users Btn --&gt;
    &lt;div class="col s12 center remove-padding"&gt;
      &lt;a href="#" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger del-exercise-btn"&gt;
        &lt;i class="material-icons white-text "&gt;remove &lt;/i&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    
    
       &lt;!-- Compiled and minified JavaScript --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
         
       &lt;!-- app.JavaScript --&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>