0

To remove the default <p> tag from tinyMCE content, I create a div that stores the content coming from tinyMCE (includes <p> tags). Then, by using find method find('p:first').html() I retrieve the html text inside the tag. It works great, I can get rid of <p> tags. However, with this approach, for example, the list tags ul are just lost in the content. I have not try, but other html tags might also get lost. Do you see any problems with my code below:

var newcontent = tinymce.get('textarea_1').getContent();
//this returns a p tag that can have hold any content: 
//<p>content goes here <ul><li>a</li></ul>...</p>

var mydiv = $("<div>").html(newcontent);

newcontent =  mydiv.find('p:first').html();
//here I just want to get rid of <p> tag
//however I also got <ul> list items removed.

UPDATE

I tried the following code, but I got the innerHtml of mydiv empty:

 var postcontent = tinymce.get('inputPostDetails').getContent();

 var mydiv = $("<div>").html(postcontent);
 mydiv.replaceWith(mydiv.children());
renakre
  • 8,001
  • 5
  • 46
  • 99

2 Answers2

1

Due to lack of rep as of now, I am unable to post question in the comments.

From what I understand of your html structure, if you remove the <p> tags, your content in it will be gone as well.

<div>
  <p> <!-- removing this will be removing its content too -->
    <ul>
      <li>#1</liv>
      <li>#2</liv>
    </ul>
  </p>
</div>

Are you intending to remove the <p> tag but not its content? Could you explain more on what you are trying to do? :)

EDIT: HTML specifies that <ul> tags are not to be inside of <p> tags

I have replaced <p> with <div> and I came up with this

Javascript:

// Simulating loading contents into the myDiv
function getContent(){
    return "<div id='removeMe'><ul><li>#1</li><li>#2</li></ul></div>";
}
var postcontent = getContent();
var mydiv = $("div").html(postcontent); // jQuery selector for tags do not need <> signs

// Removing P tag but keep contents
function removeP(){
    var replaceThisElement = mydiv.find("#removeMe");
    var contents = replaceThisElement.html();
    $("div > #removeMe").replaceWith(contents + "<div>element removed!</div>");
}

HTML:

<button onclick="removeP()">Remove P tag but keep contents</button>

<div>
</div>

Working example here

Community
  • 1
  • 1
swlim
  • 452
  • 4
  • 17
  • exactly, I am trying to remove p tag but keep its content. Actually it keeps its content but when I have a list item inside p, then it just removes that part and keeps the other text. – renakre Mar 22 '15 at 03:21
  • I've just thought of it, you cannot put `
      ` inside of `

      `, refer to this [SO post about it](http://stackoverflow.com/questions/10601345/ul-element-can-never-be-a-child-of-p-element)

     – swlim Mar 22 '15 at 12:46
1

Here's an example, https://jsfiddle.net/7denp9h0/

var p = $('#removeMe');
p.replaceWith(p.children())
cdosborn
  • 3,111
  • 29
  • 30
  • could you please check the updated code? I think it will still keep `

    ` tag. I just need its content. I can access its content but it discards other html tags inside the content.

     – renakre Mar 22 '15 at 05:12
  • 1
    Your issue is that your putting elements inside a `

    `. Which is [incorrect](http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it). i.e. there is not guaranteed behavior. The fiddle works, substituting a `

    ` for a `

    `, check the updated fiddle.
     – cdosborn Mar 22 '15 at 15:46