Converting html text into plain text

Question

I have the following HTML:

<div id = "id1">
    "some text 1"<br>
    "more text 2" <br>
    "name" <br>
    <li> "list 1"</li>
    "THEend"
    <div class="class1" style="margin: 0px; padding: 0px;">
      &nbsp;&nbsp;
    </div>
</div>

And the following JavaScript:

var contents  = document.getElementsById("id1").innerHTML

Currently, the result of contents includes the text from both id1 and class1 -- but I want to eliminate the contents of class1 entirely.

How should I proceed?

Your post isn't tagged with "jQuery" -- but you could take a look at it its `text` method: http://api.jquery.com/text/ . — Casey Falk, Jul 17 '14 at 15:06
So you want get the `innerHTML` but without `style` attribute and its value? — pawel, Jul 17 '14 at 15:07
@user3848973, edit your question instead of posting a comment. — Casey Falk, Jul 17 '14 at 15:07
Since your HTML is invalid, it's difficult to suggest a proper solution. If you don't want get HTML, then use `innerText` or `textContent` instead of `innerHTML`. Wait, in your comment you say you *do* want to get the HTML?? I'm confused now. — Felix Kling, Jul 17 '14 at 15:07
Possible duplicate: http://stackoverflow.com/questions/9340449/is-there-a-way-to-get-innertext-of-only-the-top-element-and-ignore-the-child-el — Casey Falk, Jul 17 '14 at 15:15

score 0 · Accepted Answer · answered Jul 17 '14 at 15:22

Here is a Really primitive example:

var original_id1 = document.getElementById('id1'),
    cloned_id1 = original_id1.cloneNode(true); // deep clone

// find all ".class1" elements
var class1_elements = cloned_id1.getElementsByClassName('class1');
// remove .class1 elements from clone
for (var i = 0; i < class1_elements.length; i++){
  var c1 = class1_elements[i], p = c1.parentNode
  p.removeChild(c1);
}

// remaining HTML
alert(cloned_id1.innerHTML);

// remaining text content(s)
alert(cloned_id1.textContent);

exmaple

Converting html text into plain text

1 Answers1