how can I delete with javascript html tag (for example span) but not the content and the html tags in the content? one example:

<div id="content">
    <span id=1 class="note" >
        <p>   <span id=1 class="note" >hello! its one example  </span> </p>
        <li>  <span id=1 class="note" >yes,one example  </span> </li>
    </span> 
</div>

the result should be:

<div id="content">
    <p> hello! its one example</p><li>yes,one example</li>
</div>

how can I delete with javascript html tag (for example span) but not the content and the html tags in the content? one example:

<div id="content">
    <span id=1 class="note" >
        <p>   <span id=1 class="note" >hello! its one example  </span> </p>
        <li>  <span id=1 class="note" >yes,one example  </span> </li>
    </span> 
</div>

the result should be:

<div id="content">
    <p> hello! its one example</p><li>yes,one example</li>
</div>

• javascript
• html
• dom

Share Improve this question Follow edited Oct 5, 2012 at 8:10 Martin asked Oct 4, 2012 at 21:44 MartinMartin 1,35011 gold badge1515 silver badges4646 bronze badges 3

• html may have more span with class="note" – Martin Commented Oct 4, 2012 at 21:57
• I do not want to use jqueri unless strictly necessary – Martin Commented Oct 4, 2012 at 22:02
• Would modifying the PHP be an option? That would allow you to remove the spans before they're ever displayed on the screen. – DACrosby Commented Oct 5, 2012 at 19:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Since you haven't mentioned that you need JQuery, following is the code that I propose:

http://jsfiddle/9qgK7/

Relevant code:

span.outerHTML = span.innerHTML;

Reference: https://developer.mozilla/en-US/docs/DOM/element.outerHTML
PS: Firefox only started supporting outerHTML since v11 but we are already using v15 :)

In your particular example, its probably best practice to just overwrite the immediate parentNode.

var content  = document.getElementById('content'),
    span     = content.getElementsByTagName('span')[0],
    p        = content.getElementsByTagName('p')[0];

content.innerHTML = span.innerHTML;

Can easily be done with Jquery:

$('span.note').each(function(){
    $(this).replaceWith($(this).html());
});

If you can use jQuery, try something like this

var newContent = $("#content span").html();
$("#content").html(newContent);

EDIT

Pure JS solution

var spans = document.getElementById("content").getElementsByClassName("note");
var out = "";

for (var i = spans.length - 1; i >= 0; i--) {
  out += spans[i].innerHTML;
}
document.getElementById("content").innerHTML = out;

jsFiddle Example