JavaScript removeChild,无需重新加载页面

我是编码的新手,在设法删除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);
}
});
评论