javascript - 如何修复删除下拉框中的元素(Materialize)
问题描述
下拉框未按预期删除。
Materialize 从 0.97 版迁移到 1.0.0 版后,该功能无法正常工作。仅删除下拉框中的文本,而不是完整的元素。
M.AutoInit();
function removeEdit() {
var el = document.getElementById("edit");
el.parentNode.removeChild(el);
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
<!-- Record actions -->
<ul id="actions" class="dropdown-content">
<li><a href="#" id="edit" onclick="alert('edit')" class="black-text">Edit</a></li>
<li><a href="#" id="delete" onclick="alert('delete')" class="black-text">Delete</a></li>
</ul>
<button type="button" onclick="removeEdit()">Remove element edit</button>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="1" class="tr-d dropdown-trigger" href="#" hover="false" data-target="actions">
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
<td>Row 1, column 3</td>
</tr>
<tr id="2" class="tr-d dropdown-trigger" href="#" hover="false" data-target="actions">
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
<td>Row 2, column 3</td>
</tr>
</tbody>
</table>
</html>
解决方案
在removeEdit
函数中,el
代表 selected<a>
所以el.parentNode
代表 selected <li>
。
当您使用el.parentNode.removeChild(el)
时,这意味着删除 selected<li>
的子项,因此它会删除<a>
标签。
改变 :
el.parentNode.removeChild(el);
到 :
el.parentNode.remove();
它会删除 selected <li>
。
推荐阅读
- java - 使用自定义验证组的自定义约束注释导致的 E2E 测试中的 java.lang.ArrayStoreException
- c# - 一个视图中的多个模型 - 使用 ViewModel 登录和注册 - 带有字段和 ModelState 验证
- javascript - 在同一进程中创建“新鲜而空”的 Node.js JavaScript 上下文的最佳方法是什么?
- matlab - MATLAB中的双精度和四精度
- python - 组合 re 标志 re.IGNORECASE、re.MULTILINE 和 re.DOTALL
- python - 张量流中的自定义渐变 - 无法理解这个例子
- reactjs - 如何让我的 React 应用程序在链接预览中正确发送页面标题?使用 NGINX 作为代理
- azure - Azure Durable Orchestrator + Sub orchestrator 任务永远无法解决
- apache-spark - Azure blob 存储的 Spark 流检查点问题:TaskCompletionListener 中的错误为 null
- javascript - JSX 道具不应使用箭头函数 eslint 警告