javascript - 如果没有匹配的内容，则删除元素及其值

Question

如果值“banana”与第 1 列中的元素“li”不匹配第 2 列中的任何值，我将尝试将其删除，但如果存在匹配值，则不应将其删除。

不知道如何使用 javascript/jquery 来实现它。

这是我到目前为止已经开始的:

<div class="container">
  <div class="column1">
  <ul>
  <li>apple</li>
  <li>banana</li> <!-- remove this element along with its value  if there is no matching content in column2 -->
  <li>orange</li>
  <li>lemon</li>
  </ul>
  </div>
  
  <div class="column2">
  <ul>
  <li>apple</li> 
  <li>banana</li> 
  <li>orange</li>
  <li>lemon</li>
  </ul>
  </div>
</div>

https://jsfiddle.net/Rgohing/wq3knp4z/

感谢我能得到的任何帮助。

Answer 1

解决方案

• 要解决此问题，首先从第二个列表中获取所有值并将其存储在数组中。

• 然后检查第一个列表的元素并检查第二个列表是否包含此元素，如果不包含则删除此元素

let compArr = [];
document.querySelectorAll('.column2 > ul > li').forEach((val) => {
  compArr.push(val.childNodes.item(0).nodeValue);
});


document.querySelectorAll('.column1 > ul > li').forEach((val, ind) => {
  if(!compArr.includes(val.childNodes.item(0).nodeValue)){
    val.remove();
  }
});

<div class="container">
  <div class="column1">
  <ul>
  <li>apple</li>
  <li>banana</li> <!-- remove this element along with its value  if there is no matching content in column2 -->
  <li>orange</li>
  <li>lemon</li>
  </ul>
  </div>
  
  <div class="column2">
  <ul>
  <li>apple</li> 

  <li>orange</li>
  <li>lemon</li>
  </ul>
  </div>
</div>