How to remove any elements that DO NOT have a hyphen in it

Question

I have a tag list that has mostly tags that start with a hyphen. I want to remove or hide all tags that DO NOT have this character. Because of limited access to code, it has to be done with jQuery/javascript. My attempt doesn't work, how to fix?

Here is my HTML:


  
    Tags
  
  
    
      
        art
        
          10
        
      
    
    
      
        -gallery
        
          9
        
      
    
    
      
        -photography
        
          9
        
      
    
    
      
        -portfolio
        
          9
        
      
    
    
      
        opinion
        
          9

Javascript:

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

user_381709 · Answer

jQuery

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

Vanilla JavaScript

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

user_12853797 · Answer

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

Something like that should work. You need to check each label-size element, so looping over a unique identifier like an id won't work.

user_5148197 · Answer

Follows a full working example, using 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 
        labelNameElements[i].parentElement.remove();
        
        //removes 1 to the index since a element was removed from the labelNameElements array.
        i--;
     }     
}


  
    Tags
  
  
    
      
        art
        
          10
        
      
    
    
      
        -gallery
        
          9
        
      
    
    
      
        -photography
        
          9
        
      
    
    
      
        -portfolio
        
          9
        
      
    
    
      
        opinion
        
          9

user_11937654 · Answer

This answer works with jQuery:

$('.label-size').each(function() {

    $(this).find(':not(:contains("-"))').remove();
    
});

.label-name {
  display:block; /* Optional, adds space between links*/
}



  
    Tags
  
  
    
      
        art
        
          10
        
      
    
    
      
        -gallery
        
          9
        
      
    
    
      
        -photography
        
          9
        
      
    
    
      
        -portfolio
        
          9
        
      
    
    
      
        opinion
        
          9

The problem was that the code wasn't using its own element inside the .each function, and it wasn't using the correct element.

Also, if you want a one liner, there's a much easier way to do this:

$(.label-size:not(:contains("-"))).remove();

user_8254484 · Answer

This is a jQuery solution, if you want a vanilla JS try @Ricardo Rocha solution:

$(document).ready(function() {
  const tags = $(".label-name");
  tags.each(function(index, element) {
    element.text.trim().startsWith("-") ? '' : element.remove();
  });
});

.label-name {
  display: block
}




  
    Tags
  
  
    
      
        art
        
          10
        
    
    
    
      
        -gallery
        
          9
        
    
    
    
      
        -photography
        
          9
        
    
    
    
      
        -portfolio
        
          9
        
    
    
    
      
        opinion
        
          9

How to remove any elements that DO NOT have a hyphen in it

5 Answers