tbody.onclick = function (e) { var e = e || document.event console.log(123) console.log(e.target) if (e.target.nodeName == 'SPAN') { this.parentElement.remove() } 这行代码如何删除li }
时间: 2024-01-13 21:03:31 浏览: 98
这段代码可以删除 `li` 元素的父元素, 也就是 `ul` 元素, 通过 `e.target` 获取到点击的元素, 如果该元素的 `nodeName` 是 `SPAN`, 则将其父元素删除。以下是修改后的代码:
```javascript
tbody.onclick = function (e) {
var e = e || document.event;
console.log(123);
console.log(e.target);
if (e.target.nodeName == 'SPAN') {
e.target.parentNode.parentNode.remove(); // 删除 li 元素的父元素 ul
}
}
```
这里需要调用两次 `parentNode` 才能获取到 `li` 元素的父元素 `ul`,因为 `e.target` 是点击的 `span` 元素,而 `li` 元素是 `span` 元素的父元素的父元素。
相关问题
tbody.onclick = function (e) { var e = e || document.event console.log(123) console.log(target) if (e.target.nodeName == 'SPAN') { e.target.parentNode.parentNode.remove() } } } 这里的e.target 是什么意思
在这段代码中,`e.target` 表示触发事件的元素。当你点击 `tbody` 元素内的某个元素时,会触发 `tbody` 的 `click` 事件,此时事件对象 `e` 中的 `target` 属性将会指向被点击的元素。通过这个方法,你可以获得用户点击的元素,并对其进行一些操作,例如在这个例子中,如果被点击的元素是一个 `span` 标签,则会移除该元素所在的行。
var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { tbody.removeChild(this.parentNode.parentNode) } var subject = document.querySelector('.subject'); var name = document.querySelector('.name'); var score = document.querySelector('.score'); var info = document.querySelector('.info'); var tbody = document.querySelector('tbody'); var arr = []; info.addEventListener('submit', function (e) { e.preventDefault(); var obj = { name: name.value, subject: subject.value, score: score.value, } arr.push(obj); this.reset(); for (var i = 0; i < arr.length; i++) { var tr = document.createElement('tr'); tr.innerHTML = ` <td>${arr[i].name}</td> <td>${arr[i].subject}</td> <td>${arr[i].score}</td> <td> <a href="javascript:;">删除 </a></td> <td> <button onclick="moveUp(this)">上移</button> <button onclick="moveDown(this)">下移</button> </td> `; } tbody.appendChild(tr); }) 为什么录入name显示undef
在您的代码中,`name`、`subject` 和 `score` 是通过 `document.querySelector` 获取的,这意味着它们应该对应 HTML 元素的 `class` 属性,而不是 `id` 属性。请检查您的 HTML 代码,确保相应的输入框具有正确的 `class` 属性。
如果您已经确认输入框的 `class` 属性设置正确,但仍然无法录入 `name`,则可能是因为您的 `name` 输入框未正确获取,或者在提交表单之前没有输入任何值。请检查您的代码,确保您已正确获取输入框并在提交表单之前输入了值。
另外,您的代码中还需要将创建 `tr` 元素和更新表格的代码放在同一个循环内。请将 `for` 循环移到 `arr` 数组的外部,将创建 `tr` 元素和更新表格的代码放在循环中。例如:
```
for (var i = 0; i < arr.length; i++) {
var tr = document.createElement('tr');
tr.innerHTML = `
<td>${arr[i].name}</td>
<td>${arr[i].subject}</td>
<td>${arr[i].score}</td>
<td><a href="javascript:;">删除</a></td>
<td>
<button onclick="moveUp(this)">上移</button>
<button onclick="moveDown(this)">下移</button>
</td>
`;
tbody.appendChild(tr);
}
```
希望这些信息能够帮助您解决问题。
阅读全文