JavaScript 动态删除元素！移除孩子答案

【问题标题】：JavaScript Removing Elements Dynamically! removeChildJavaScript 动态删除元素！移除孩子
【发布时间】：2020-05-25 14:05:25
【问题描述】：

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

// ----------------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>

【问题讨论】：

HTML 中没有“.del-exercise-btn'”类元素，这可能只是该行中的第一个错误。您还需要一个具有您所引用的类或 id 的元素，以便能够通过 JavaScript 对其进行操作。

标签： javascript forms button materialize removechild

【解决方案1】：

更新：

您的 HTML 中有嵌套错误，缺少 </div>，这就是 DOM 不包含表单的原因
1. 使用开发者工具通过检查元素来检查 DOM，你会发现结构是错误的
2. 您还可以在 HTML 窗格中使用例如 Codepen 的“分析 HTML”功能来检查您的 HTML
<form> 的类是Exercises-form，因此选择器.exercises-form（来自const exerciseForm = document.querySelector('.exercises-form');）找不到元素，因为CSS 类名区分大小写。 exerciseForm 然后变成null，导致错误Uncaught TypeError: Cannot read property 'addEventListener' of null
删除按钮仍然不起作用。我建议你自己试试。使用浏览器开发人员工具，尤其是 DOM 元素检查器和控制台，对您的选择器查询进行交互式测试（并且您在元素检查器中选择的元素可以在控制台中以 $0 的形式访问。）。 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');
    // ...
});

【讨论】：

如果您在另一个平台上设置展示柜，例如Stackblitz、CodeSandbox、Codepen ......这样会更容易看到正在发生的事情。

【解决方案2】：

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

您正试图从按钮中删除其父级。并且您需要从父级中删除该按钮。

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

【讨论】：