javascript - JavaScript removeChild 来自 dom 的输入

Question

我正在尝试删除发布到 DOM 上的表单输入，但 removeChild 代码不起作用，当检查控制台时，我将收到一个错误，即：materialize.min.js:6 Uncaught TypeError: Cannot read property 'M_Modal' of null at HTMLBodyElement.value (materialize.min.js:6)

// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', () => {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });


//Delete Exercises 
const delExerciseBtn = document.querySelector('.del-exercise-btn');

delExerciseBtn.addEventListener('click', (e) => {
if(e.target.className == 'delete'){
  const h6 = e.target.parentElement;
  h6.removeChild(e.target);
}
});

// Add User's To the Dom.
const addExerciseDom = document.querySelector('.exercise-dom');
const exerciseForm = document.querySelector('.exercises-form');

exerciseForm.addEventListener('submit', (e) => {
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);  


});

标签： javascriptmaterializeremovechild

Answer 1

你可以这样做

      // ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', () => {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems);
  });


//Delete Exercises 
const delExerciseBtn = document.querySelector('.del-exercise-btn');

delExerciseBtn.addEventListener('click', (e) => {
  const h6 = document.getElementsByTagName('h6')[0];
   h6.remove();
});

// 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) => {
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');


});