从 ul li 中删除点 - TypeScript

当使用 TypeScript 编写 Web 应用程序时，我们通常需要在 HTML 中使用带有 dot 标记的列表。然而，有时候需要删除这些点。

本文将向您展示如何使用 TypeScript 从 ul 和 li 元素中删除点。

第一步 - 获取 ul 元素

首先，我们需要获取要删除点的 ul 元素。我们可以通过使用 document.getElementById 来获 取 ul 元素的引用。

const ul = document.getElementById("my-list") as HTMLUListElement;

第二步 - 移除点

我们可以使用 Array.from 将 ul 中的所有 li 元素存储在数组中。接下来，我们使用 forEach 循环遍历该数组，将每个 li 元素的 innerText 设置为不带有点的字符串。

const liArr = Array.from(ul.getElementsByTagName("li"));
liArr.forEach((li) => {
  li.innerText = li.innerText.replace(/^\s*•\s*/, "");
})

现在，我们已经成功地从 ul 中移除了点。完整的代码如下所示：

const ul = document.getElementById("my-list") as HTMLUListElement;

const liArr = Array.from(ul.getElementsByTagName("li"));
liArr.forEach((li) => {
  li.innerText = li.innerText.replace(/^\s*•\s*/, "");
})

我们可以将上面的代码放在某个事件处理程序中，例如页面加载事件或按钮单击事件，以在需要时从列表中删除所有点。

结论

本文介绍了如何使用 TypeScript 从 ul 和 li 元素中删除点。我们使用了 document.getElementById 来获取 ul 元素的引用，然后使用 Array.from 将 ul 元素中的所有 li 元素存储在数组中。接 下来，我们使用 forEach 循环遍历该数组，并使用正则表达式从每个 li 元素的 innerText 中删除点。

希望这篇文章能够帮助您从列表中删除点。请随时发表评论，分享您的想法和经验。