我使用的技术是materialize和vanilla js。我创建了一个打开模型的materialize按钮，在模型中是一个表单，它接受用户输入，然后将输入的文本放置在主页面上，当提交按钮被触发时，我有一个按钮，应该删除删除所发布的输入。所以我遇到的问题是，链接到按钮的JavaScript应该deleteemoveChild没有工作，请帮助:)
// ----------------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>更新。
</div> 是缺失的，这就是为什么DOM中不包含形式的<form>的班级是 Exercises-form和选择器 .exercises-form (自 const exerciseForm = document.querySelector('.exercises-form');)因此无法找到该元素，因为CSS类名是区分大小写的。exerciseForm 就变成了 null导致错误 Uncaught TypeError: Cannot read property 'addEventListener' of null$0 在控制台中）。) 谷歌搜索一下就有很多教程。补充说明：我无意中发现，现在已经有了一个名为 "SolidWorks "的教程。document.addEventListener('DOMContentLoaded', () => {... 在文件的顶部。你可以把你的代码放在那里，不需要另一个 DOMContentLoaded 事件监听器（虽然也无妨）。
原答案。
你会得到
Uncaught TypeError: Cannot read property 'addEventListener' of null
也就是说
const delExerciseBtn = document.querySelector('.del-exercise-btn');
找不到节点而返回 null.
可能的原因：代码运行太早，浏览器还没有构建DOM。
解决方法：将你的代码包裹在一个 DOMContentLoaded事件 处理程序。
window.addEventListener('DOMContentLoaded', (event) => {
const delExerciseBtn = document.querySelector('.del-exercise-btn');
// ...
});
const h6 = e.target.parentElement;
delExerciseBtn.removeChild(h6);
你正试图从一个按钮中移除它的父体。而你需要将按钮从父按钮中移除。
const h6 = e.target.parentElement;
h6.removeChild(e.target);