JavaScript 动态删除元素！删除孩子

Question

我使用的技术是 materialize 和 vanilla js。我创建了一个打开模型的物化按钮。在模型中是一个接受用户输入的表单，然后在触发提交按钮时将输入文本放到主页上。然后我有一个按钮，应该 remove/delete 输入已发布。所以我遇到的问题是 JavaScript 链接到应该 delete/removeChild 的按钮不起作用。请帮助:)

// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', () => {
    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) => {
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) => {
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');


});

<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
      <title></title>

      <!-- Google icons -->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  
      <!-- Sytle.css -->
      <link rel="stylesheet" type="text/css" href="style.css">
      
    
</head>
<body>
   
<!----- user's input ------->
<div class="row">
  <div class="col s12 center valign-wrapper center-align">
   <div class=" exercise-dom delete"> <!--Users text input h6----> </div>
   </div>
</div>


<!-- Btn/Modals/form -->
   <div class="row">
   <!-- Dom Btn -->
    <div class="col s12 center ">
      <a href="#exercise" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger disabled-exersicebtn">
        <i class="material-icons white-text">add </i>
      </a>
    </div>
    
   <!-- Modal/form -->
  <div class="modal modal-position" id="exercise">
   <div class="modal-content">

    <div class="row exercises-padding">
     <form class="col s12 exercises-form" autocomplete="off">
       <div class="input-field col s10"> 
         <i class="material-icons prefix">fitness_center</i>
          <input type="text" id="autocomplete-input"  class="autocomplete center">
            <label for="autocomplete-input" ><h6>Exercises</h6></label>
       </div>
       <div class="modal-footer">
         <input class="modal-close btn black" type="submit" value="Submit">
       </div>
     </form>
    </div>     
   </div>
  </div>
  
  
<!-- Remove Users Btn -->
  <div class="col s12 center remove-padding">
    <a href="#" class="btn-floating btn-small darken-4 z-depth-2 black center modal-trigger del-exercise-btn">
      <i class="material-icons white-text ">remove </i>
    </a>
  </div>
  
  
     <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
       
     <!-- app.JavaScript -->
    <script src="app.js"></script>
</body>
</html>

Answer 1

更新：

您的 HTML 中存在嵌套错误，缺少 </div>，这就是 DOM 不包含表单的原因
1. 通过检查元素用开发者工具检查DOM，你会发现结构是错误的
2. 您还可以在 HTML 窗格中使用例如 Codepen 的 "Analyze HTML" 功能来检查您的 HTML
<form>的class是Exercises-form，select或.exercises-form（来自const exerciseForm = document.querySelector('.exercises-form');）因此不能找到元素，因为 CSS class 名称区分大小写。 exerciseForm 然后变为 null，这会导致错误 Uncaught TypeError: Cannot read property 'addEventListener' of null
删除按钮仍然不起作用。我建议你自己试试。使用浏览器开发人员工具，尤其是 DOM 元素检查器和用于 select 或查询的交互式测试的控制台（元素检查器中 select 的元素可以作为 [=21 =] 在控制台中。）。 Google 搜索了很多教程。

附加说明：我发现文件顶部已经有一个 document.addEventListener('DOMContentLoaded', () => {...。你可以把你的代码放在那里，不需要另一个 DOMContentLoaded 事件监听器（尽管它也没有坏处）。

原回答：

你得到

Uncaught TypeError: Cannot read property 'addEventListener' of null

这意味着

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

找不到节点并返回 null。

可能原因：代码运行太早，浏览器还没有构造DOM.

解决方案：将您的代码包装在 DOMContentLoaded event 处理程序中：

window.addEventListener('DOMContentLoaded', (event) => {
    const delExerciseBtn = document.querySelector('.del-exercise-btn');
    // ...
});

Answer 2

const h6 = e.target.parentElement;
delExerciseBtn.removeChild(h6);

您正在尝试从按钮中删除其父项。并且您需要从父项中删除按钮。

const h6 = e.target.parentElement;
h6.removeChild(e.target);

JavaScript 动态删除元素！删除孩子

JavaScript Removing Elements Dynamically! removeChild

javascript

forms

button

materialize

removechild