Question

我有以下列表。如何根据锚标签中的文本选项和组标签类中的文本值删除特定选项？假设我要从组1中删除选项1，该怎么做？：

<div class="non-selected-wrapper">
  <div class="header">All options</div>
  <div class="item-group">
    <span class="group-label">Group1</span>
    <a tabindex="0" class="item" role="button" data-value="11050" multi-index="0">Option1</a>
    <a tabindex="0" class="item" role="button" data-value="11052" multi-index="1">Option2</a>
  </div>
  <div class="item-group">
    <span class="group-label">Group2</span>
    <a tabindex="0" class="item" role="button" data-value="11064" multi-index="2">Option1</a>
    <a tabindex="0" class="item" role="button" data-value="11053" multi-index="3">Option2</a>
    <a tabindex="0" class="item" role="button" data-value="11054" multi-index="4">Option3</a>
  </div>
  <div class="item-group">
    <span class="group-label">Group3</span>
    <a tabindex="0" class="item" role="button" data-value="11051" multi-index="5">Option1</a>
    <a tabindex="0" class="item" role="button" data-value="11056" multi-index="6">Option2</a>
  </div>
</div>

Answer 1

要专门执行您的要求，请使用以下代码：

$("span.group-label:contains('Group1')").closest(".item-group").find("a.item:contains('Option1')").remove()

要使其更通用，您将需要了解这些选择器。基本上，我正在找到包含“ Group1”文本的“ group-label”类跨度。从那里开始，我遍历其父级“ item-group”。在其中，我找到了包含文本“ Option1”的“ item”类的锚并将其删除。

如果您不想专门删除该项目，当然可以添加所需的任何逻辑。

Answer 2

使用原始Javascript：

const labels = [...document.querySelectorAll('.group-label')];
const groupToRemoveFrom = "Group1";
const optionToRemove = "Option1";

const target = [
  ...labels
    .filter(x => x.textContent === groupToRemoveFrom)[0]
    .parentNode.querySelectorAll('a')
  ].filter(x => x.textContent === optionToRemove)[0];

target.parentNode.removeChild(target);

<div class="non-selected-wrapper">
  <div class="header">All options</div>
  <div class="item-group">
    <span class="group-label">Group1</span>
    <a tabindex="0" class="item" role="button" data-value="11050" multi-index="0">Option1</a>
    <a tabindex="0" class="item" role="button" data-value="11052" multi-index="1">Option2</a>
  </div>
  <div class="item-group">
    <span class="group-label">Group2</span>
    <a tabindex="0" class="item" role="button" data-value="11064" multi-index="2">Option1</a>
    <a tabindex="0" class="item" role="button" data-value="11053" multi-index="3">Option2</a>
    <a tabindex="0" class="item" role="button" data-value="11054" multi-index="4">Option3</a>
  </div>
  <div class="item-group">
    <span class="group-label">Group3</span>
    <a tabindex="0" class="item" role="button" data-value="11051" multi-index="5">Option1</a>
    <a tabindex="0" class="item" role="button" data-value="11056" multi-index="6">Option2</a>
  </div>
</div>

如何从特定跨度类别中搜索和删除特定的锚标签

2 个答案: