I have a HTML container with some contents, including texts nodes and other tags:

<div id="container">
    A text outside any tag<br/>
    <input type="button" id="iii" value="xxx"/>
    Another text<br/>
    <a href="#">A link</a>
</div>

I want to use jQuery to hide everything in that container except the input tag.

// Hide all the node
$("#container").contents().hide();

// First try to hide texts
$("#container").contents().filter(":text").hide();
// Second try
$("#container").contents().filter(function() {
    return this.nodeType === 3;
}).hide();

// Show the desired element
$("#container #iii").show();

The link "A link" is removed, but the texts before and after the input still remains.

What is the right way to hide a text that is a direct child of a DOM element?

You can play with that example on jsfiddle

I have a HTML container with some contents, including texts nodes and other tags:

<div id="container">
    A text outside any tag<br/>
    <input type="button" id="iii" value="xxx"/>
    Another text<br/>
    <a href="#">A link</a>
</div>

I want to use jQuery to hide everything in that container except the input tag.

// Hide all the node
$("#container").contents().hide();

// First try to hide texts
$("#container").contents().filter(":text").hide();
// Second try
$("#container").contents().filter(function() {
    return this.nodeType === 3;
}).hide();

// Show the desired element
$("#container #iii").show();

The link "A link" is removed, but the texts before and after the input still remains.

What is the right way to hide a text that is a direct child of a DOM element?

You can play with that example on jsfiddle

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Dec 10, 2015 at 15:38 Antwane asked Oct 28, 2015 at 18:51 AntwaneAntwane 22.8k88 gold badges5656 silver badges8989 bronze badges 6

• I would add everything inside the container I want to hide inside sub-containers of one class and everything I don't want to hide inside sub-containers of another. Or, create two copies of the whole container, the second copy contains only the elements I don't want to hide and starts hidden, or forget about hide/show and just user jQuery to generate the contents of the container based on whatever conditions you wish. – SunKnight0 Commented Oct 28, 2015 at 18:58
• whats the reason for you not to put text in any tag – Gacci Commented Oct 28, 2015 at 18:59
• The reason is I don't have control on the generation of this html. It's generated by a framework I am not authorized to modify – Antwane Commented Oct 28, 2015 at 19:01
• Are you authorised to modify the html through javascript? For example putting a span around nodes? – Praxis Ashelin Commented Oct 28, 2015 at 19:13
• @PraxisAshelin yes it could be a solution – Antwane Commented Oct 28, 2015 at 19:27

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

Your .hide() will not work on the textnodes, because a style (in this case display:none;) always needs to be applied to a tag. It can't be applied to a node itself.

However, you can manipulate the HTML with Javascript to manually add spans around these textnodes:

// Get all the nodes in the container and loop over them
var allNodes = document.getElementById("container").childNodes;
for (i = 0; i < allNodes.length; i++) {
    var item = allNodes[i];

    if(item.tagName){
        // It already has a proper tag, so just hide it with a class
        $(item).addClass("hidden");
    }else{
        // Add a span around it
        $(item).wrap("<span class='hidden'>");
    }
}

$("#container #iii").removeClass("hidden");

JSFiddle

Then if you want to unhide the div contents later, you can simply remove the class, and leave the spans there (they won't hurt anyone).

$("#container .hidden").removeClass("hidden");

The reason is I don't have control on the generation of this html. It's generated by a framework I am not authorized to modify

Try setting #container , #container *:not(#iii) css color property to transparent

$("#container, #container *:not(#iii)").css("color", "transparent")

#container {
    border: 1px solid red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    A text outside any tag<br/>
    <input type="button" id="iii" value="xxx"/>
    Another text<br/>
    <a href="#">A link</a>
</div>

jsfiddle https://jsfiddle/h7yuq8b6/10/

---

Are you authorised to modify the html through javascript?

---

yes it could be a solution

Alternatively, if html can be modified , could utilize .clone() to store original element as jQuery object, including all html content within element. Use .each() to iterate child nodes of original element, if node has "style" property call .hide() on child node , else set #text node .nodeValue to empty string.

Could reset html to original using clone of original element

// save orginal `html`
var clone = $("#container").clone(); 

$("#container").contents().filter(function() {
  return this.nodeType === 3 || this.id !== "iii"
}).each(function() {
  if ("style" in this) {
    $(this).hide()
  } else {
    this.nodeValue = ""
  }
})

#container {
    border: 1px solid red;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    A text outside any tag<br/>
    <input type="button" id="iii" value="xxx"/>
    Another text<br/>
    <a href="#">A link</a>
</div>

I hope I am not confusing you. I posted my old answer because I was marked down. Please focus on the new answer. If you have access to adding css here it is the solution. Else, you can use JavaScript and add this css; find button's location and dimension modify the css according to location and dimension. Then add the css using jQuery. Note that I used pink and red just to show you what I am doing!

$('#container :not(label)').hide();

#container2 {
    border: 1px solid red;
    position: relative;
}
#container2:before{
    content: '\0020';
    width: 142px;
    height: 17.5px;
    position: absolute;
    top:0px;
    left: 0px;
    background: pink;
}
#container2:after{
    content: '\0020';
    width: 315px;
    height: 17.5px;
    position: absolute;
    top: 20px;
    left: 40px;
    background: red;
    z-index: 99;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This is my old answer -->
<div id="container2">
    <label>A text outside any tag</label><br/>
    <input type="button" id="iii" value="xxx"/>
    <label>Another text</label><br/>
    <a href="#">A link</a>
</div>


<!-- This is the new answer -->
<br/><br/>
<div id="container">
    A text outside any tag<br/>
    <input type="button" id="iii" value="xxx"/>
    Another text<br/>
    <a href="#">A link</a>
</div>