无需页面重装的JavaScript removeChild

Question

我是编码的新手，在弄清楚删除H6时如何停止重新加载页面方面有些挣扎，我已经尝试过e.preventdefault，但似乎不起作用。我的项目是仅香草js。请帮助我：）

const addExerciseDom = document.querySelector('.exercise-dom');
const exerciseForm = document.querySelector('.exercises-form');
const disabledExersiceBtn = document.querySelector('.disabled-exersicebtn');

exerciseForm.addEventListener('submit', (e) => {
e.preventDefault();

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

});




//deleting the h6
const delExercise = document.querySelector('.del-exercise');

delExercise.addEventListener('click', (e) => {
 //tried e.preventdefault didn't work.
if(e.target.className == 'delete'){
  const h6 = e.target.parentElement;
  list.removeChild(h6);
}
});

Answer 1

我尝试通过您的js恢复代码，因此请在操场上查看我的示例（无需重新加载页面）

  const addExerciseDom = document.querySelector('.exercise-dom');
  const exerciseForm = document.querySelector('.exercises-form');
  const disabledExersiceBtn = document.querySelector('.disabled-exersicebtn');


  const deleteExercise = (e) => {
    if(e.target.className.indexOf('delete') >= 0){
      const h6 = e.target.parentElement;
      addExerciseDom.removeChild(h6);
    }
  }

  exerciseForm.addEventListener('submit', (e) => {
    e.preventDefault();

    const value = exerciseForm.querySelector('input[type="text"]').value;

    // Create Elements
    const div =  document.createElement('div');
    const h6 = document.createElement('h6');
    const delExercise = document.createElement('button');
    delExercise.className = "del-exercise delete";
    delExercise.innerHTML = "delete";
    delExercise.onclick = deleteExercise

    div.appendChild(h6)
    div.appendChild(delExercise)

    // Add Content
    h6.textContent = value;

    // Append To Dom
    addExerciseDom.appendChild(div);  

    //Disable Btn
    disabledExersiceBtn.setAttribute('disabled', 'disabled');
    exerciseForm.querySelector('input[type="text"]').value = ''
  });


  //deleting the h6
  const delExercise = document.querySelector('.del-exercise');
  if (delExercise) {
    delExercise.addEventListener('click', (e) => {
      return (deleteExercise(e))    
    });
  }

https://jsfiddle.net/denisstukalov/tzrk4nev/25/#&togetherjs=LEeegj4Ozq