我对编码非常陌生！！我使用的技术是物化和原始js。我创建了一个物化按钮来打开模型。模型中的表单是接受用户输入的表单，然后在触发Submit btn时将输入文本放置到主页上。然后我有一个按钮，应该删除/删除发布的输入。因此，我遇到的问题是链接到应该删除/删除儿童的按钮的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>更新：
</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的形式访问在元素检查器中选择的元素）。 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');
// ...
});
const h6 = e.target.parentElement;
delExerciseBtn.removeChild(h6);
您正在尝试从按钮中删除其父项。并且您需要从父项中删除按钮。
const h6 = e.target.parentElement;
h6.removeChild(e.target);