jquery - How to remove HTML tags, but preserve text, and then later replace the tags? -

<ruby><rb>自分</rb><rp>（</rp><rt>じぶん</rt><rp>）</rp></ruby> 

i want remove <ruby> tags, want keep contents. want <ruby> tags on page.

i don't know how try, had idea keep html content in variable, remove <ruby> tags hide(), , splash text again, don't know how re-insert in specific section of text. also, i'm struggling each.

i'd remember tags removed, can them later click.

use unwrap function:

$('ruby').unwrap();

http://api.jquery.com/unwrap/

edit:

how following tutorial example in above link?

ptags = $('ruby');  if ( ptags.parent().is("span") ) {   ptags.unwrap();   ptags.wrap("<ruby></ruby>"); } else {   ptags.unwrap();   ptags.wrap("<span class='unwrapped_ruby'></span>"); } 

unwrap <ruby> tag , wrap placeholder <span> tag.

update 1:

well, previous code had right "pseudocode", tested , wasn't working properly. instead had this:

ptags = $('ruby'); var content = ptags.contents();  $("button").click(function () {     if (content.parent().is("span")) {         content.unwrap().wrapall("<ruby></ruby>");     } else {         content.unwrap().wrapall("<span class='unwrapped_ruby'></span>");     } }); 

update 2:

update 1 didn't take consider multiple <ruby> tags. have updated code works multiple ruby tags nested <ruby> tags!

var wrapper = $('ruby'); var content;  $("button").click(function () {     wrapper.each(function () {         content = $(this).contents();         if (content.parent().is("span")) {             content.unwrap().wrapall("<ruby></ruby>");             wrapper = $('ruby');         } else {             content.unwrap().wrapall("<span class='unwrapped_ruby'></span>");             wrapper = $('span.unwrapped_ruby');         }     });  }); 

try jsfiddle