Javascript - 如何使用点击事件和 类 移除 DOM 元素?
Javascript - How to Remove DOM elements using click events and classes?
我在使用 parentNode.removeChild()
时遇到一些困难。我在一个无序列表中有一个 'items' 的列表,每个列表都有自己的删除按钮。我正在尝试将点击事件绑定到每个单独的按钮,这将删除它各自的父级 'item'。
到目前为止我的代码:
<ul class="list">
<h2>This is a list</h2>
<li class="item">
<h3>Some Item</h3>
<button class="delete">Delete</div>
</li>
<li class="item">
<h3>Some Item</h3>
<button class="delete">Delete</div>
</li>
<li class="item">
<h3>Some Item</h3>
<button class="delete">Delete</div>
</li>
</ul>
var childElements = document.getElementsByClassName('item');
var buttonElement = document.getElementsByClassName('delete');
function deleteItem(buttonsClass, childClass) {
for (var i=0;i<buttonsClass.length;i++) {
var child = childClass[i];
buttonsClass[i].addEventListener('click', function(child) {
childClass[i].parentNode.removeChild(childClass[i]);
}, false);
}
}
deleteItem(buttonElement, childElements);
我知道 jQuery 有更简单的方法,但我真的想用简单的 javascript 来解决这个问题。感谢您提供的所有帮助。
问题是您在单击元素时调用的 childClass[i]
并不是您在定义函数时所期望的。
您应该使用 event.target
来捕捉点击的元素
var childElements = document.getElementsByClassName('item');
var buttonElement = document.getElementsByClassName('delete');
var _handler = function(e) {
e.target.parentNode.parentNode.removeChild(e.target.parentNode);
}
function deleteItem(buttonsClass, childClass) {
for (var i=0;i<buttonsClass.length;i++) {
buttonsClass[i].addEventListener('click', _handler, false);
}
}
deleteItem(buttonElement, childElements);
-- 编辑--
如果想用原来的方法,那么可以这样解决:
function deleteItem(buttonsClass, childClass) {
for (var i=0;i<buttonsClass.length;i++) {
(function(child) {
buttonsClass[i].addEventListener('click', function(e) {
child.parentNode.removeChild(child);
}, false);
})(childClass[i]);
}
}
通过封装(function(encapsulatedChild) { })(child)
你可以将child的值存储在下一个循环中不会改变的上下文中。
您似乎想绑定一个点击事件来删除按钮,并在该事件中删除该项目。
您需要获取子 类 个单独的 buttonsClass
元素。
function deleteItem( childElements )
{
Array.prototype.slice.call( childElements ).forEach( function( item ){
var deleteChildren = item.getElementsByClassName( "delete" );
Array.prototype.slice.call( deleteChildren ).forEach( function( deleteBtn ){
deleteBtn.addEventListener('click', function()
{
this.parentNode.removeChild( this );
}, false);
});
});
}
或者更简单,只需传递单击哪个父级 item
将被删除的按钮列表
function deleteItem( buttonElement )
{
Array.prototype.slice.call( buttonElement ).forEach( function( button ){
button.addEventListener('click', function()
{
this.parentNode.removeChild( this );
}, false);
});
}
这是 event delegation 的完美案例。根本不需要 jQuery:
(function(window, htmlElement) {
'use strict';
htmlElement.addEventListener("click", handleClick, false);
function handleClick(event) {
if (event.target.classList.contains("delete")) {
event.preventDefault();
removeItem(event.target);
}
}
function removeItem(button) {
var item = getItem(button),
confirmMessage;
if (item) {
confirmMessage = item.getAttribute("data-confirm");
if (!confirmMessage || window.confirm(confirmMessage)) {
item.parentNode.removeChild(item);
}
}
else {
throw new Error("No item found");
}
}
function getItem(button) {
var element = button.parentNode,
item = null;
while (element) {
if (element.nodeName === "LI" || element.nodeName === "TR") {
item = element;
break;
}
element = element.parentNode;
}
return item;
}
})(this, this.document.documentElement);
无论您有多少个删除按钮,整个页面都有一个点击处理程序。这也适用于列表项或 table 行,通过在按钮上指定 data-confirm
属性,它会在删除之前弹出一个确认框。
<button type="button" class="delete"
data-confirm="Are you sure you want to delete this item?">
Delete
</button>
您也可以轻松更改此设置,使其使用另一个属性来查找删除按钮:
<button type="button" class="delete"
data-delete
data-confirm="...">
Delete
</button>
只需将handleClick函数中if
语句的条件改为:
if (event.target.hasAttribute("data-delete")) {
event.preventDefault();
removeItem(event.target);
}
这使您的行为与样式脱钩。您可以使用 delete
class 名称来设置样式,并使用 data-delete
属性来设置 JavaScript 行为。如果您出于任何原因需要更改 CSS 的名称,请删除 class,或使用不同的 class,因为您决定使用第三方 CSS 框架,例如 Bootstrap,那么 JavaScript.
一行都不需要改
这里的最后一个优点是点击处理程序附加到 document.documentElement
对象,该对象在 JavaScript 开始执行并代表 <html>
元素时可用。不需要 jQuery 的文档就绪事件处理程序。只需附加点击处理程序并在页面上的任意位置导入脚本。
我在使用 parentNode.removeChild()
时遇到一些困难。我在一个无序列表中有一个 'items' 的列表,每个列表都有自己的删除按钮。我正在尝试将点击事件绑定到每个单独的按钮,这将删除它各自的父级 'item'。
到目前为止我的代码:
<ul class="list">
<h2>This is a list</h2>
<li class="item">
<h3>Some Item</h3>
<button class="delete">Delete</div>
</li>
<li class="item">
<h3>Some Item</h3>
<button class="delete">Delete</div>
</li>
<li class="item">
<h3>Some Item</h3>
<button class="delete">Delete</div>
</li>
</ul>
var childElements = document.getElementsByClassName('item');
var buttonElement = document.getElementsByClassName('delete');
function deleteItem(buttonsClass, childClass) {
for (var i=0;i<buttonsClass.length;i++) {
var child = childClass[i];
buttonsClass[i].addEventListener('click', function(child) {
childClass[i].parentNode.removeChild(childClass[i]);
}, false);
}
}
deleteItem(buttonElement, childElements);
我知道 jQuery 有更简单的方法,但我真的想用简单的 javascript 来解决这个问题。感谢您提供的所有帮助。
问题是您在单击元素时调用的 childClass[i]
并不是您在定义函数时所期望的。
您应该使用 event.target
来捕捉点击的元素
var childElements = document.getElementsByClassName('item');
var buttonElement = document.getElementsByClassName('delete');
var _handler = function(e) {
e.target.parentNode.parentNode.removeChild(e.target.parentNode);
}
function deleteItem(buttonsClass, childClass) {
for (var i=0;i<buttonsClass.length;i++) {
buttonsClass[i].addEventListener('click', _handler, false);
}
}
deleteItem(buttonElement, childElements);
-- 编辑--
如果想用原来的方法,那么可以这样解决:
function deleteItem(buttonsClass, childClass) {
for (var i=0;i<buttonsClass.length;i++) {
(function(child) {
buttonsClass[i].addEventListener('click', function(e) {
child.parentNode.removeChild(child);
}, false);
})(childClass[i]);
}
}
通过封装(function(encapsulatedChild) { })(child)
你可以将child的值存储在下一个循环中不会改变的上下文中。
您似乎想绑定一个点击事件来删除按钮,并在该事件中删除该项目。
您需要获取子 类 个单独的 buttonsClass
元素。
function deleteItem( childElements )
{
Array.prototype.slice.call( childElements ).forEach( function( item ){
var deleteChildren = item.getElementsByClassName( "delete" );
Array.prototype.slice.call( deleteChildren ).forEach( function( deleteBtn ){
deleteBtn.addEventListener('click', function()
{
this.parentNode.removeChild( this );
}, false);
});
});
}
或者更简单,只需传递单击哪个父级 item
将被删除的按钮列表
function deleteItem( buttonElement )
{
Array.prototype.slice.call( buttonElement ).forEach( function( button ){
button.addEventListener('click', function()
{
this.parentNode.removeChild( this );
}, false);
});
}
这是 event delegation 的完美案例。根本不需要 jQuery:
(function(window, htmlElement) {
'use strict';
htmlElement.addEventListener("click", handleClick, false);
function handleClick(event) {
if (event.target.classList.contains("delete")) {
event.preventDefault();
removeItem(event.target);
}
}
function removeItem(button) {
var item = getItem(button),
confirmMessage;
if (item) {
confirmMessage = item.getAttribute("data-confirm");
if (!confirmMessage || window.confirm(confirmMessage)) {
item.parentNode.removeChild(item);
}
}
else {
throw new Error("No item found");
}
}
function getItem(button) {
var element = button.parentNode,
item = null;
while (element) {
if (element.nodeName === "LI" || element.nodeName === "TR") {
item = element;
break;
}
element = element.parentNode;
}
return item;
}
})(this, this.document.documentElement);
无论您有多少个删除按钮,整个页面都有一个点击处理程序。这也适用于列表项或 table 行,通过在按钮上指定 data-confirm
属性,它会在删除之前弹出一个确认框。
<button type="button" class="delete"
data-confirm="Are you sure you want to delete this item?">
Delete
</button>
您也可以轻松更改此设置,使其使用另一个属性来查找删除按钮:
<button type="button" class="delete"
data-delete
data-confirm="...">
Delete
</button>
只需将handleClick函数中if
语句的条件改为:
if (event.target.hasAttribute("data-delete")) {
event.preventDefault();
removeItem(event.target);
}
这使您的行为与样式脱钩。您可以使用 delete
class 名称来设置样式,并使用 data-delete
属性来设置 JavaScript 行为。如果您出于任何原因需要更改 CSS 的名称,请删除 class,或使用不同的 class,因为您决定使用第三方 CSS 框架,例如 Bootstrap,那么 JavaScript.
这里的最后一个优点是点击处理程序附加到 document.documentElement
对象,该对象在 JavaScript 开始执行并代表 <html>
元素时可用。不需要 jQuery 的文档就绪事件处理程序。只需附加点击处理程序并在页面上的任意位置导入脚本。