如何删除没有连字符的元素

Question

我有一个标签列表，其中大部分标签都是以连字符开头的。我想删除或隐藏所有没有此字符的标签。由于对代码访问的限制，它必须使用jQuery/javascript完成。我的尝试不起作用，如何修复？

这是我的HTML：

<div class="widget Label" data-version="2" id="Label1">
  <h3 class="title">
    Tags
  </h3>
  <div class="widget-content cloud-label-widget-content">
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/art">
        art
        <span class="label-count">
          10
        </span>
      </a>
    </span>
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/-gallery">
        -gallery
        <span class="label-count">
          9
        </span>
      </a>
    </span>
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/-photography">
        -photography
        <span class="label-count">
          9
        </span>
      </a>
    </span>
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/-portfolio">
        -portfolio
        <span class="label-count">
          9
        </span>
      </a>
    </span>
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/opinion">
        opinion
        <span class="label-count">
          9
        </span>
      </a>
    </span>
  </div>
</div>

Javascript：

$('#label1').each(function() {
    $('#label1 span').find(':not(:contains("-"))').remove();
});

Answer 1

jQuery

jQuery(function($) {
  $(`.label-size:not(:contains("-"))`).remove();
});

香草JavaScript

document.addEventListener("DOMContentLoaded", function(){
  for(let node of document.getElementsByClassName("label-size")) {
    if(!/-/.test(node.textContent)) {
      node.remove();    
    }
  }
});

Answer 2

$('.label-size').each((element) => { 
element.textContent.indexOf('-') >= 0 ? element.remove() : null;
});

像这样的东西应该是可行的。您需要检查每个标签大小的元素，因此循环遍历唯一标识符将不起作用。

Answer 3

下面是一个完整的工作示例，使用vanilla javascript：

​

// Gets the dom element which id="Label1"
const labelDiv = document.getElementById("Label1");

// Gets all elements which has the css class name 'label-name'
const labelNameElements = labelDiv.getElementsByClassName("label-name");

// For each element 'label-name' dom element
for(let i=0; i < labelNameElements.length; i++) {
     
     // Verifies if the element contains a '-'
     if(labelNameElements[i].text.indexOf('-') > -1) {
        
        //removes the parent element (in this case the <span class="label-size label-size-...">
        labelNameElements[i].parentElement.remove();
        
        //removes 1 to the index since a element was removed from the labelNameElements array.
        i--;
     }     
}

<div class="widget Label" data-version="2" id="Label1">
  <h3 class="title">
    Tags
  </h3>
  <div class="widget-content cloud-label-widget-content">
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/art">
        art
        <span class="label-count">
          10
        </span>
      </a>
    </span>
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/-gallery">
        -gallery
        <span class="label-count">
          9
        </span>
      </a>
    </span>
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/-photography">
        -photography
        <span class="label-count">
          9
        </span>
      </a>
    </span>
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/-portfolio">
        -portfolio
        <span class="label-count">
          9
        </span>
      </a>
    </span>
    <span class="label-size label-size-5">
      <a class="label-name" href="https://about.xarcell.studio/search/label/opinion">
        opinion
        <span class="label-count">
          9
        </span>
      </a>
    </span>
  </div>
</div>

​