this.parentElement和element.parentElement有什么区别

Question

这段代码制作了一个删除表行的按钮，它是有效的，但我有一些错误理解，

如果我在这一切中都是对的，请纠正我

I know as following:-  

1*-(this(在*第4行中，它表示主标签为。

2-第8行中的元素与第4行中(this(相同。

3-因此，对于第4行中的(this(，以及

4-parentElement表示(td(。

根据我的理解，我把这个例子写在下面：-

示例：tr(this(td(parentElement(

注意：-这是小提琴码，以备不时之需。

javascript

var td4 = document.createElement('td'); 
td4.setAttribute("id", "td4");
td4.innerHTML = `<button 
onclick=remove(this.parentElement)>X</button>` ***line4**
tr.appendChild(td4);
function remove(element){
element.parentElement.remove(element) ***line8**
}

---

---

HTML

<div class='table'>
<table id="table">
<th>
<tr>
<td>Task</td>
<td>Date</td>
<td>Urgency</td>
<td>Done</td>
</tr>
</th>
<button onclick=clearAll()> Clear All </button>
</table>
</div>

Answer 1

onclick=remove(this.parentElement)中的this.parentElement引用单击的元素((的父元素，并将其作为参数值发送给remove((函数。然后，remove((函数获取该send的父元素<tr>并将其删除。因此，第4行中的this是<button>，第8行中的元素是<td>。

当你按下按钮时，你可以在下面的片段中看到它。

//Create default tr for demonstration purpose
var tr = document.createElement('tr');
tr.innerHTML = "<td>a</td><td>b</td><td>c</td>";
var td4 = document.createElement('td');
td4.setAttribute("id", "td4");
//added console.log to show what this.parentElement is.
td4.innerHTML = `<button onclick=console.log("this.parentElement="+this.parentElement);remove(this.parentElement)>X</button>`;
tr.appendChild(td4);
document.querySelector("#table").appendChild(tr);
function remove(element) {
//added console.log to show what element.parentElement is.
console.log(`element.parentElement=${element.parentElement}`);
element.parentElement.remove(element);
}

<div class='table'>
<table id="table">
<th>
<tr>
<td>Task</td>
<td>Date</td>
<td>Urgency</td>
<td>Done</td>
</tr>
</th>
<button onclick=clearAll()> Clear All </button>
</table>
</div>