var topClick = function() {
child = this.parentNode.parentNode.parentNode.parentNode;
child.parentNode.removeChild(child);
var theFirstChild = document.querySelector(".m-ctt .slt");
data[child.getAttribute("data-id")].rank = 5;
insertBlogs();
};
正如您所看到的，我的代码中有这样一部分：
As you see, there is a part of my code like this:
this.parentNode.parentNode.parentNode.parentNode;
有没有其他方法来优化代码（不使用jQuery）？
您可以使用非递归的辅助函数，例如：
function nthParent(element, n) {
while(n-- && element)
element = element.parentNode;
return element;
}
您可以使用递归辅助函数，例如：
function getNthParent(elem, n) {
return n === 0 ? elem : getNthParent(elem.parentNode, n - 1);
}
var child = getNthParent(someElement, 4);
return n === 0 ? elem : arguments.callee(elem.parentNode, n - 1); - yaochiqklarguments.callee”对我来说有些繁琐。我会使用命名函数表达式代替。例如：var myFn = function getNthParent(elem, n) { ... } - madox2根据您在原问题中的评论，您的总体目标是：
有一个博客列表。每个博客都有像“编辑”和“删除”之类的按钮。当我点击这些按钮时，我想找到它的博客元素。
我认为解决您面临的问题的最佳方法（而不是回答您提出的问题-抱歉！）是以不同的方式来解决问题。
从您的评论中，您说您有类似以下内容：
<ul id="blog-list">
<li class="blog-item">
<a href="blog1.com">
Boats galore!
</a>
<span class="blog-description">
This is a blog about some of the best boats from Instagram.
</span>
<span class="blog-button delete-button">
Delete
</span>
<span class="blog-button edit-button">
Edit
</span>
</li>
<li class="blog-item">
<a href="blog2.com">
Goats galore!
</a>
<span class="blog-description">
A blog about the everyday adventures of goats in South Africa.
</span>
<span class="blog-button delete-button">
Delete
</span>
<span class="blog-button edit-button">
Edit
</span>
</li>
<li class="blog-item">
<a class="blog-link" href="blog3.com">
Totes galore!
</a>
<span class="blog-description">
A blog about containers and bags, and the owners who love them.
</span>
<span class="blog-button delete-button">
Delete
</span>
<span class="blog-button edit-button">
Edit
</span>
</li>
</ul>
你的目标是为每个 blog-link 项的 button 元素添加 click 事件处理程序。
因此，让我们将该目标从普通英语翻译成伪代码：
for each `blog-link` `b`
delete_button.onclick = delete_handler(`b`);
edit_button.onclick = edit_handler(`b`);
可在此链接查看实际运行效果: http://jsfiddle.net/vbt6bjwy/10/
<script>
function deleteClickHandler(event, parent) {
event.stopPropagation();
parent.remove();
}
function editClickHandler(event, parent) {
event.stopPropagation();
var description = parent.getElementsByClassName("blog-description")[0];
description.innerHTML = prompt("Enter a new description:");
}
function addClickHandlers() {
var bloglistElement = document.getElementById("blog-list");
var blogitems = bloglistElement.getElementsByClassName("blog-item");
blogitems.forEach(function(blogitem){
var deleteButtons = blogitem.getElementsByClassName("delete-button");
deleteButtons.forEach(function(deleteButton){
deleteButton.onclick = function(event) {
return deleteClickHandler(event, blogitem);
}
});
var editButtons = blogitem.getElementsByClassName("edit-button");
editButtons.forEach(function(editButton){
editButton.onclick = function(event) {
return editClickHandler(event, blogitem);
}
});
});
}
HTMLCollection.prototype.forEach = Array.prototype.forEach;
addClickHandlers();
</script>
你选择实现的解决方案是有效的，但我想给你提供一个不同的看待同样问题的方法。
在我看来，blog 实体的内部标签不应该对周围 HTML 的结构或属性有所了解，以便使你的 edit 和 delete 按钮能够工作。
你原来的解决方案必须从每个 button 开始向上遍历父元素链，直到找到它所假定的正确父元素，基于一种脆弱的方法，如硬编码在父元素链中向上移动 N 次。如果我们可以使用普通的 JavaScript 元素选择器，那么不管 HTML 结构如何变化，只要类和 ID 保持一致，我们的 JavaScript 就不会出错，这不是更好吗？
这个解决方案迭代了 #blog-list 元素中的每个 blog-item：
blogitems.forEach(function(blogitem){ ... });
在 forEach 循环中，我们获取包含 .delete-button 和 .edit-button 元素的数组。对于每个元素，我们将适当的事件处理程序添加到 onclick 属性中：
deleteButtons.forEach(function(deleteButton){
deleteButton.onclick = function(event) {
return deleteClickHandler(event, blogitem);
}
});
var topClick = function(event){
console.log(event);
child = this.parentNode.parentNode.parentNode.parentNode;
child.parentNode.removeChild(child);
var theFirstChild = document.querySelector(".m-ctt .slt");
data[child.getAttribute("data-id")].rank = 5;
insertBlogs();
};
惊喜！我通过console.log打印出事件，并在其中找到了以下数组：
而我找到了我想要的元素：
function(event){
console.log(event.path[4]);
child = event.path[4];
}
它居然能工作！太神奇了！也许事件代理是另一种方式！
感谢你们提供答案！
下次在提问之前我会先仔细思考的！:D
.closest()方法（纯 JavaScript），它的工作方式类似于 jQuery 的.closest()方法。 - Josh Crozier