我想在 JavaScript 的两个数组中删除相同的 innerText

Question

当我点击 delete-button (.btn-wrap>li>button) 时，我希望用 JavaScript 删除相同 innerText 的 className("add")。

<div class="table">
  <ul>
    <li class="added">list_1</li>
    <li class="added">list_2</li>
    <li class="added">list_3</li>
  </ul>
</div>
<ul class="btn-wrap">
  <li>
    <span>list_1</span>
    <button class="delete"></button>
  </li>
  <li>
    <span>list_2</span>
    <button class="delete"></button>
  </li>
  <li>
    <span>list_3</span>
    <button class="delete"></button>
  </li>
</ul>

Answer 1

编辑：问题不清楚。然而，在浏览了附加的 HTML 和问题本身之后，我修改了我的答案。

我对这个问题的理解：OP 正在寻找基于从下面的列表中单击“删除”按钮从上面的列表元素中删除一个类。我现在修改了我的代码 sn-p 来实现这一点。如果这不是您想要的，请告诉我，以便我可以相应地修改我的解决方案。

const addedList = document.querySelectorAll('.added');

document.querySelectorAll('.delete').forEach(btn => {
  btn.addEventListener('click', e => {
    e.preventDefault();
    const deletedVal = e.target.previousSibling.previousSibling.textContent;
    addedList.forEach(listItem => {
      if (listItem.textContent === deletedVal) {
        listItem.classList.remove('added');
      }
    });
  });
});

.added {
color: blue;
}

<div class="table">
          <ul>
            <li class="added">list_1</li>
            <li class="added">list_2</li>
            <li class="added">list_3</li>
          </ul>
        <ul class="btn-wrap">
          <li>
            <span>list_1</span>
            <button class="delete">Delete</button>
          </li>
          <li>
            <span>list_2</span>
            <button class="delete">Delete</button>
          </li>
          <li>
            <span>list_3</span>
            <button class="delete">Delete</button>
          </li>
        </ul>
      </div>