从 Javascript 呈现的文本中删除元素答案

【问题标题】：Removing an element from a text rendered by Javascript从 Javascript 呈现的文本中删除元素
【发布时间】：2021-09-04 04:31:57
【问题描述】：

我有一个页面，其中包含插入和转换 Markdown 文件的脚本：

<head>
  <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
</head>
<body>
  <article>
    <zero-md id="text"></zero-md> <!-- the area into which each .md is to be inserted and converted -->
    <script>
      document.getElementById("text").src="CONVERTME1.md";
    </script>
  </article>
</body>

转换本身有效，文本被显示。每个 .md 文件都将是一个系列的一部分，这些脚本将使我能够绕过手动转换文本的过程，这样我就可以经常轻松地回到它们进行编辑。我计划将getElement 变成.md 文件序列的导航按钮，就像一本书的章节来回翻转一样。在创建这些按钮之前，必须定期删除转换的每个输出中的一个元素。它是每个原始 .md 文件顶部（第一行）的字符串。它以“tags:”开头，后跟一个或多个关键字。 Markdown 编辑器 (WriteMonkey) 使用它进行内部搜索操作，我打算将它们保留在每个 .md 文件中以供以后编辑（和自动转换/更新），而它们在 HTML 页面的最终输出中没有任何用途.此字符串由zero-md 脚本转换为

<p>
  ::before
  "tags: KEYWORD"
</p>

里面

<zero-md id="text">
  #shadow-root (open)
    <div class="markdown-body">

所以我尝试了

<script>
  document.getElementByTagName("p::before").contains("tags:").remove();
</script>

作为<article> 中的最后一个元素，但它不起作用。然后我尝试（在同一个地方）jQuery

<script>
  $("p::before").contains("tags:").remove();
</script>

，但它也没有工作。我不确定p::before 和.contains("tags:")，所以我只尝试p 看看它是否会影响正文的任何段落，它没有做任何事情，zero-md 中的所有内容都将保持不变.我检查了zero-md 之外的元素是否可以删除。所以我认为问题在于p（或任何元素）应该是从 .md 文件转换并可供参考的，在解析的那一刻，getElementByTagName 无法访问。

有什么办法吗？

切线：我尝试用getElementByTagName("zero-md") 替换getElementById("text")（以取消id="text"），但没有成功。为什么？

谢谢。

【问题讨论】：

没有getElementByTagName 方法。使用querySelector('zero-md') 或getElementsByTagName('zero-md')[0]。

标签： javascript markdown

【解决方案1】：

您似乎希望从呈现的内容中去除第一个 <p> 标记。最简单的方法如下：

<article>
  <zero-md id="text">
    <template data-merge="append">
      <style>
      .markdown-body>p:first-child {
        display: hidden;
      }
      </style>
    </template>
  </zero-md>
  <script>
    document.getElementById("text").src="CONVERTME1.md";
  </script>
</article>

【讨论】：