CODEWITHSUNDEEP
javascriptjqueryhtml
Eric Fluharty
Eric Fluharty

Reputation: 111

Javascript hide content in label tag and label tag after

I want to hide text based on the text in a label tag and I want to hide text in the next label tag to. I know how to make it hide the username cause that text will always be the same, but I don't know how to make it hide the users message.

Here's what the code looks like:

<div id="chatbox">
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">BlockMe:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">BlockMe:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
</div>

This is what i want it to look like after the javascript runs:

<div id="chatbox">
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick" style="display: none">BlockMe:</label>
	<br>
	<label id="cmsg" style="display: none">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick" style="display: none">BlockMe:</label>
	<br>
	<label id="cmsg" style="display: none">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
	<label id="cnick">OtherUsers:</label>
	<br>
	<label id="cmsg">Some random text</label>
	<div id="cspc"></div>
	<br>
</div>

Upvotes: 0

Views: 398

Answers (2)

Isaac Ray
Isaac Ray

Reputation: 1361

Assuming you're using jquery, you could use .html() to get the value inside the element, and then use .next() to grab the next label element.

Something like:

$('label').each(function(){
 if($(this).html() == "BlockMe:"){
    $(this).hide();
    $(this).next().hide()
  }
 });

Upvotes: 1

B&#233;ranger
B&#233;ranger

Reputation: 673

First : Please notice that an ID has to be unique. 'cnick', 'cmsg', 'cspc' should be classes.

You could create a container for each username/message. It will be easier to hide it.

<div id="chatbox">
    <div class="msg-box">
        <label class="cnick">OtherUsers:</label>
        <br>
        <label class="cmsg">Some random text</label>
        <div class="cspc"></div>
        <br>
    </div>
    <div class="msg-box">
        <label class="cnick">OtherUsers:</label>
        <br>
        <label class="cmsg">Some random text</label>
        <div class="cspc"></div>
        <br>
    </div>
    <div class="msg-box">
        <label class="cnick">OtherUsers:</label>
        <br>
        <label class="cmsg">Some random text</label>
        <div class="cspc"></div>
        <br>
    </div>
    <div class="msg-box">
        <label class="cnick">OtherUsers:</label>
        <br>
        <label class="cmsg">Some random text</label>
        <div class="cspc"></div>
        <br>
    </div>
</div>

Then you have to be able to find with jquery wich boxes you wan't to hide with a selector (a class, id or anything else) and you can hide the boxes like this :

$(mySelector).hide();

Upvotes: 0

Related Questions