面向对象的方式删除当前点击的列表

[yizihan]

<ul class="list">
	<li>第一行 <span class="del">X</span></li>
	<li>第二行 <span class="del">X</span></li>
	<li>第三行 <span class="del">X</span></li>
	<li>第四行 <span class="del">X</span></li>
	<li>第五行 <span class="del">X</span></li>
</ul>
<ul class="list">
	<li>第一行 <span class="del">X</span></li>
	<li>第二行 <span class="del">X</span></li>
	<li>第三行 <span class="del">X</span></li>
	<li>第四行 <span class="del">X</span></li>
	<li>第五行 <span class="del">X</span></li>
</ul>

// 使用面向对象
// 解耦事件绑定和执行
// 事件委托
class List {
	constructor (sel) {
		// 转为数组
		this.el = Array.from(document.querySelectorAll(sel));
		let self = this;	// self = List {el: Array(2)}
		this.el.forEach(item => {
			item.addEventListener('click', function(e) {
				debugger
				// 判断触发点是span
				if (e.target.className.indexOf('del') > -1) {
					// 执行删除元素方法
					self.removeItem.call(self, e.target);
				}
			})
		})
	}
	removeItem (target) {
		let self = this;	// self指向ul元素
		let findParent = function (node) {
			// 1. node = span.del
			// 2. node = li
			let parent = node.parentNode;
			// 1. parent = li
			// 2. parent = ul.list === self.el
			let root = self.el.find(item => item === parent);
			// 1. root = undefined parent = li
			// 2. root = ul.list parent = ul.list
			if (root) {
				// 2. 删除当前li元素
				root.removeChild(node);
			} else {
				// 1. 继续执行查找
				findParent(parent);
			}
		}
		findParent(target)
	}
}
window.addEventListener('DOMContentLoaded', function() {
	new List('.list')	// 实例化调用
})