【发布时间】：2020-09-08 05:49:36
【问题描述】：
我有以下由程序生成的 html。该计划已经结束 带有额外列表的列表，这会导致 HTML 上显示额外的项目符号 页。我正在尝试清理列表，以便仅保留有效的列表项 并且移除了无关的周围列表。
我编写了以下代码，适用于 list1 和 list2，但不适用于 list3 和 list4。
$("body>ul, body>ol").each(
function removeExtraneousLists(index, element) {
$element = $(element);
$leafList = $element.find("ul, ol").not(":has(ul,ol)");
$element.html($leafList.html())
}
)
我猜我正在寻找的条件是错误的。目视检查列表让我知道列表何时有额外的项目符号，但我真的不知道如何编写正确的选择器来清理列表 3 和 4。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.expected {
background-color: palegoldenrod;
border: dashed 1px;
}
</style>
</head>
<body>
<ul id="list1">
<li>
<ul>
<li>
<ul>
<li>
<ol>
<li>Currency 1</li>
<li>Currency 2</li>
<li>Currency 3</li>
</ol>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<strong>Expected Output:</strong>
<ol class="expected">
<li>Currency 1</li>
<li>Currency 2</li>
<li>Currency 3</li>
</ol>
<hr />
<ul id="list2">
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>A “geographical segment”</li>
<li>A “service segment”</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<strong>Expected Output:</strong>
<ul class="expected">
<li>A “geographical segment”</li>
<li>A “service segment”</li>
</ul>
<hr />
<ul id="list3">
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li>
For every request for clearance :
<ul>
<li>Prereq1</li>
<li>PreReq2</li>
<li>PreReq3</li>
<li>
PreReq4 (<a href="#_bookmark83">Refer to this</a>)
</li>
</ul>
</li>
<li>
For every request for approval:
<ul>
<li>Approval Prereq1</li>
<li>Approval Prereq2</li>
</ul>
</li>
<li>Date of the last approval; and</li>
<li>Names and signatures of approval committee.</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<strong>Expected Output:</strong>
<ul class="expected">
<li>
For every request for clearance :
<ul>
<li>Prereq1</li>
<li>PreReq2</li>
<li>PreReq3</li>
<li>PreReq4 (<a href="#_bookmark83">Refer to this</a>)</li>
</ul>
</li>
<li>
For every request for approval:
<ul>
<li>Approval Prereq1</li>
<li>Approval Prereq2</li>
</ul>
</li>
<li>Date of the last approval; and</li>
<li>Names and signatures of approval committee.</li>
</ul>
<hr />
<p>In particular, when setting up a new block:</p>
<ol id="list4">
<li>
the approver shall:
<ul>
<li>
ensure compliance with
<a href="#_bookmark73">Another List</a>;
</li>
<li>appoint a delegation;</li>
</ul>
</li>
<li>
the requester shall:
<ul>
<li>ensure that he makes a request;</li>
<li>
<a id="requester"></a>
<a id="_bookmark133"></a>ensure that he submits the letter by hardcopy;
</li>
<li>
assist the approver in regularly:
<ul>
<li>reviewing the current status of his request</li>
<li>reviewing the weekly progress</li>
<li>reviewing the final closure</li>
</ul>
</li>
</ul>
</li>
</ol>
<strong>Expected Output:</strong>
<p class="expected">Exactly the same list with no change</p>
<hr />
</body>
</html>列表 3 的预期输出是：
仅供参考 - 这是我上一个问题的后续问题，我得到了一个有用的答案，帮助我继续前进。
How to find the deepest ul/ol with list items in a nested list
【问题讨论】：
-
首先修复创建额外列表的代码不是更好吗？
-
我无权访问该程序。我得到了输出，我必须使用它:(
-
每个列表的期望输出是什么？
-
作为替代方案，您是否考虑过在 css 中执行此操作，例如
ul,ol { list-style:none; padding-inline-start:0 } -
@Argee 所需的输出是要删除的额外空列表，以便仅保留真实内容。当我看到它时，我知道什么是额外的，但我无法清楚地提出一个适合上述所有示例的通用标准:(
标签： javascript html jquery dom