JavaScript从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');
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');


});

Answer 1

对于h6Best的多值，要在每一个新的h6Check上添加id，以保证体重和运动量。

// Materialize Initialization Of Autocomplete, Exercise.
document.addEventListener('DOMContentLoaded', () => {
  var elems = document.querySelectorAll('.autocomplete');
  var instances = M.Autocomplete.init(elems,{
    data: {
      "Lat Pull Down": null,
      "Lat  Down": null,
    },
    limit:2,
    minLength:1,
  });
});

// Materialize Initialization Of Box Select, Sets and Reps.
document.addEventListener('DOMContentLoaded', () => {
  var elems = document.querySelectorAll('select');
  var instances = M.FormSelect.init(elems);
});

// Materialize Initialization Of Weights CharacterCount
document.addEventListener('DOMContentLoaded', () => {
  var textNeedCount = document.querySelectorAll('.weightcountercount');
  M.CharacterCounter.init(textNeedCount);
});
//need to put restrition on the number typed into the box without it submitting


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


// ------------ Add Form's Inputs Onto The HomePage----------------

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

delExerciseBtn.addEventListener('click', (e) => {
  // Remove Form Input
  const h6_e = document.getElementById('h6_exercise');
   h6_e.remove();
   // Remove Disable Btn
   disabledExersiceBtn.removeAttribute('disabled');
});


// Add User's Exercises 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');
  
  //for exercise
  const h6_exercise = document.createElement('h6');
  
  // Add Content
  h6_exercise.textContent = value;
  //adding id
  h6_exercise.setAttribute("id", "h6_exercise");
  // Append To Dom
  addExerciseDom.appendChild(h6_exercise);  

  //Disable Btn
  disabledExersiceBtn.setAttribute('disabled', 'disabled');

});

//---------------------Weight----------------------
// Delete Exercises From The Dom
const delWeightBtn = document.querySelector('.del-weight-btn');

delWeightBtn.addEventListener('click', (e) => {
  // Remove Form Input
  let h6_r = document.getElementById('h6_weight');
   h6_r.remove();
});

// Add User's Weight To The Dom.
const addWeightDom = document.querySelector('.weight-dom');
const weightForm = document.querySelector('.weight-form');

weightForm.addEventListener('submit', (e) => {
e.preventDefault();
 if(document.getElementById('h6_weight'))
  {
  let h6_r = document.getElementById('h6_weight');
  
  h6_r.remove();  
 }
   // Get Input Value
   const value = weightForm.querySelector('input[type="number"]').value;
   const value1 = weightForm.querySelector('input[type="text"]').value;
   //console.log(value, value1);

   // Create Elements
   const h6_weight = document.createElement('h6');
  
  h6_weight.setAttribute('id','h6_weight')
   //h6.classList.add("center");// not working

   // Add Content
   h6_weight.textContent = value + " " + value1;
   
   // Append To Dom
   addWeightDom.appendChild(h6_weight);
   
   
  });



// ------------------Add Exercises Colum----------------------
//const addMoreBtn = document.getElementById("addmorebtn");
////const addColums = document.getElementById("addcolumns");


//addMoreBtn.addEventListener('click', (e) => {
   // e.preventDefault();

   // const text = 
   // `<div class="col s4 height"></div>
   // <div class="col s2 height "></div>
   // <div class="col s2 height"></div>
   // <div class="col s2 height"></div>
   // <div class="col s2 height"></div>`
    
    //const position = "beforeend";
    //addColums.insertAdjacentHTML(position, text);
//});

Answer 2

你可以这样做

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


});