JavaScript 动态删除元素!删除孩子
JavaScript Removing Elements Dynamically! removeChild
我使用的技术是 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>
更新:
- 您的 HTML 中存在嵌套错误,缺少
</div>
,这就是 DOM 不包含表单的原因
- 通过检查元素用开发者工具检查DOM,你会发现结构是错误的
- 您还可以在 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');
// ...
});
const h6 = e.target.parentElement;
delExerciseBtn.removeChild(h6);
您正在尝试从按钮中删除其父项。并且您需要从父项中删除按钮。
const h6 = e.target.parentElement;
h6.removeChild(e.target);
我使用的技术是 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>
更新:
- 您的 HTML 中存在嵌套错误,缺少
</div>
,这就是 DOM 不包含表单的原因- 通过检查元素用开发者工具检查DOM,你会发现结构是错误的
- 您还可以在 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');
// ...
});
const h6 = e.target.parentElement;
delExerciseBtn.removeChild(h6);
您正在尝试从按钮中删除其父项。并且您需要从父项中删除按钮。
const h6 = e.target.parentElement;
h6.removeChild(e.target);