CODEWITHSUNDEEP
javascripthtmlcss
TruMan1
TruMan1

Reputation: 36128

How do I hide text that is not wrapped in <p> or <span>?

I have html where I only want to hide the text portion, but what complicates it is that it is not wrapped in anything. Below is an example:

<div class="content">

    Give comfortable and durable place to work with a desk.
    Lock the center drawer and all of the drawers lock,
    keeping your files and supplies secure.

    <table cellpadding="4" cellspacing="0">
        <tbody>
            <tr>
                <th align="right">Available Options:</th>
                <td>Desktop Color: Fusion Maple, Gray Nebula...</td>
            </tr>
            <tr>
                <th align="right">Book Box Construction:</th>
                <td>Not applicable</td>
            </tr>
        </tbody>
    </table>
</div>

How can I hide the "Give comfortable and durable..." portion above without changing the html at all? I was hoping to do it via CSS and maybe Javascript if necessary. CSS only would be perfect though. Can anyone help?

Upvotes: 3

Views: 338

Answers (6)

Robert Koritnik
Robert Koritnik

Reputation: 105059

Look ma', no hands scripts!

CSS only solution

.content
{
    text-indent: -1000em;
}

.content *
{
    text-indent: 0;
}

/* This one's pure cherry on top ;) */
/* Remove excess vertical space */
.content *:first-child
{
    margin-top: -1em;
}

JSFiddle demo.

Upvotes: 4

Philip Sheard
Philip Sheard

Reputation: 5825

CSS:

#content {
  visibility: hidden;
}

JavaScript:

document.getElementsByTagName("div")[0].style.visibility = "hidden";
or:
document.getElementsByClassName("content")[0].style.visibility = "hidden";

Upvotes: 0

Scherbius.com
Scherbius.com

Reputation: 3414

There is no easy way for that. You'll have to write an html stripper on JavaScript or simply modify your html by hands.

Upvotes: 0

Prescott
Prescott

Reputation: 7412

Using javascript (and jQuery in my case):

var table = $('.content table'); //copy the table
$('.content').html(table); //replace the html of div.content with table

If you have multiple classes of content then you'll need to rewrite this a bit to work over a collection

Upvotes: 1

Kai
Kai

Reputation: 9318

This removes the text node, which is a container for the text:

var div = document.getElementsByTagName('div')[0];
div.removeChild(div.firstChild);

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

CSS defines the appearance of the contents of a tag. No tag, no styling.

You need to modify the HTML. Sorry.

Upvotes: 2

Related Questions