How to hide closest label If string parameter equals text of a div

Question

If the text in div.level equals the text in variable dlevel I would like to hide the closest label to that div.

I cannot directly edit the HTML, it is automatically created by the software so I cannot edit the text in div.level. The variable "dlevel" is actually being pulled in from a URL parameter. I can change this parameter (the value of 'dlevel') as it may be an issue with it containing '$'. However, this needs to be versatile so that if the parameter is 50 the label for 50 is hidden and not the label for 500 and vice versa. Any help would be greatly appreciated.

var dlevel = '$50'; 

$('div.level').filter(function () { 
  return $(this).text() == dlevel;
}).closest('label').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="level-container">
    <label>
        <div class="level">
            $50
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $100
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $500
        </div>
    </label>
</div>

Calvin Nunes · Accepted Answer · 2018-09-19T14:28:44.630

1

I think you are using the wrong approach.

You can loop through the divs .level using jQuery each() and get the textContent of each div.

Then all you need to do is the check if the text equals to the value of dlevel, if yes, get the closest label with closest() (that traverse up the DOM) and hide it.

var dlevel = '$50'; 

$('div.level').each(function(){
  let text = this.textContent.trim(); //or this.innerText.trim() 
  if (text == dlevel){
    $(this).closest('label').hide()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="level-container">
    <label>
        <div class="level">
            $50
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $100
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $500
        </div>
    </label>
</div>

edited Sep 19 '18 at 14:28

answered Sep 19 '18 at 14:16

Calvin Nunes

6,376
4
20
48

Instead of using .textContent I'd suggest using .text(). Ref https://stackoverflow.com/questions/24427621/innertext-vs-innerhtml-vs-label-vs-text-vs-textcontent-vs-outertext/24428100#24428100 – Robbie Sep 19 '18 at 14:24
Yes, it is another way to get the text, the asker can choose. – Calvin Nunes Sep 19 '18 at 14:28
It's not about choice, it's about what's better. .text() will have more cross browser compatibility. – Robbie Sep 19 '18 at 14:29
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Browser_compatibility – Calvin Nunes Sep 19 '18 at 16:10

score 0 · Answer 2 · answered Sep 19 '18 at 14:21

0

Try $(this).text().trim() === dlevel

answered Sep 19 '18 at 14:21

Ahmed Zakir

11
1

Please, always when answering a question, try to explain to the asker why she should "try this" – Calvin Nunes Sep 19 '18 at 14:27
When I tested her code out, $(this).text() had white space around so it did not return true. I am just removing that extra space with trim(). – Ahmed Zakir Sep 19 '18 at 16:50

tokism · Answer 3 · 2018-09-20T02:22:04.967

Try using a each() like this. You also need to use trim() to remove the whitespace. You can use parent() to find the label parent of each .level as long as the label is always the parent.

let dlevel = "$50";

$('div.level').each( function() {
  if ($(this).text().trim() === dlevel) {
    $(this).parent().hide()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="level-container">
    <label>
        <div class="level">
            $50
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $100
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $500
        </div>
    </label>
</div>

Please, always when answering a question, try to explain to the asker why she should "try this" — Calvin Nunes, Sep 19 '18 at 14:27

score 0 · Answer 4 · answered Sep 19 '18 at 14:35

Try Following using $.each

   var dlevel = "$50";
  $.each($('div .level'),function(i,val){
         if($(val).text().trim()==dlevel)
            {
            $(val).closest('label').hide();
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="level-container">
    <label>
        <div class="level">
            $50
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $100
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $500
        </div>
    </label>
</div>

How to hide closest label If string parameter equals text of a div

4 Answers4