We Keep Coding

Why is the p (paragraph) tag removed when all text is removed from the field?

I have multiple "CKEditor" editors on the same page. And now I observe strange behavior.
For example, I am initializing CKEditor to the p tag. And this works:
That is, I delete the text, but the first p tag of this kind is always kept:
<p data-placeholder="Type some text...">...</p>
But the documentation always contains this example:
<div id="editor"></div>
I change the p tag to div and I get this:
Above, when deleting text, this code is removed:
<p data-placeholder="Type some text...">...</p>
But if remove the focus from the field, then the tag p appears again:
Has anyone encountered similar behavior?

I'm using Vue. And I used v-html to render the original values. That was the problem. I fixed the problem using the setData method from CKEditor.

Removing specific tag but keeping its child element as it is

I am trying to copy the HTML content of specific tag and and then removing the specific HTML tag and attaching the copied element of that tag to the sibling of removed tag. Is there way to fix solve this issue?
For e.g HTML is like this :
<p>This is sample <span id ="1">text <strong>to v<span>erify</span></strong> the</span> issue</p>
I am expecting output like this :
<p>This is sample text <strong>to v<span>erify</span></strong> the issue</p>
Now if you observe the span element with id="1" has been removed , but its parent contents are still there which are appended to the siblings of deleted span(id=1) element.

I have too low of a rep to be able to comment.
Just as a reminder you can name an elements HTML5 id starting with a digit. But if you do, you can only target that element using the id from javascript not using CSS.
It's hard to tell the problem because I can't see the sample code. Like #FedeSc pointed out you probably forgot to put it in.
Please edit the question with the sample code and I'll gladly see if I can help you.

div in headline tag autocloses

I've got this HTML-Content. I knew that this is not correct HTML but I can't change it because it's user generated by a WYSIWG-Editor and this mistake was done hundered of times by users:
<div>
<H2 style="COLOR: #0000ff"> <DIV align=left>TEXT<br /></H2></STRONG>
</DIV>
</div><br />
Problem is that the Div AFTER the H2 Tag is closed AFTER the closing Tag from the H2.
What happens is that the H2 autocloses the enclosed DIV and the original closes the Div above.
As I can't change the Sourcecode in those masses of Content-Files, is there a way to prevent this behaviour with CSS???

CSS won't fix this. If this is generated by the editor specifically then you need a new editor. If you're setting content in JavaScript based on the content of an editable region you might be in luck. Browsers auto-close tags as the content is assigned. Say you have JavaScript to handle that content, and you're assigning that HTML to an element. When it's assigned to the element it will add the closing tag, and then when you go to programmatically close the tag at the correct time you'll get the duplicate close. I found when I do this I need to store the HTML into a string var temporarily, and then assign the HTML when it's all complete. If you need a quick lightweight html5 editor I have one at http://www.makrit.net/5edit

Adding style to untagged text

I have html that I can't change (as its coming from a clients database)
something like below. as you can see it is not wrapped in a tag, and I can't select the div, as I only want to target stuff under the sub_header (if it's present) with white-space:pre-line;
<span class="sub_header">Example:</span>
<br/>
Some text
That I need to wrap with white-space:pre-line;
As it displays on one line in html
all the way done to the div
</div>
Is this even possible?

$('div.container').css('white-space', 'pre-line');
$('div.container span.sub_header').css('white-space', 'normal');
That code should apply the CSS to the parent div (which I assumed has a class of container but change it to whatever) but not the child span. There are more elegant ways to do it (get inner content, exclude the span, then wrap it in another div styled as you need) but this will do in a jiffy assuming they are all in this format.

looking for something like this? http://jsfiddle.net/pKyG7/4/
<div>
<span class="sub_header">Example:</span><br/>
<div style="font:arial; font-size:26px; white-space:pre-line;">Some text
That I need to wrap with white-space:pre-line;
As it displays on one line in html
all the way done to the div.</div>
</div>

Here's a jQuery solution: http://jsfiddle.net/9PzeS/
$($('.sub_header + br')[0].nextSibling).wrap('<span style="white-space:pre-line"></span>');
Not sure if it's ideal and needs some error handling, but it seems to work.
Edit - Slightly more readable version:
var textNode = $('.sub_header + br')[0].nextSibling;
$(textNode).wrap('<span style="white-space:pre-line"></span>');
$('.sub_header + br')[0] selects the br tag in your example and gets the dom node. nextSibling is a vanilla js property that selects the next sibling, including text nodes.
I then wrap that with a span with the correct style.

how to move element in dom and on screen with javascript or jquery

Lets say I have a "p" tag like this:
<div id = "example">
<p id = "eg">This is a text example.</p>
</div>
If I later insert other elements into that div is it possible to move the paragraph tag somewhere else in the dom, and it be visible to the user where I want it. So the result should be like this:
<div id = "example">
<p id = "eg1">Another block of text.</p>
<p id = "eg">This is a text example.</p>
<p id = "eg2">Yet another block of text.</p>
</div>
So not only do I want to move it around...perhaps even into another div or different area of the page, but I also would like the ability to make sure that the user sees the text exactly as I want them too...maybe moved to the bottom or something.

If you wish to move an element from one position to another you can simply do the following:
$("#eg1").after($("#eg"));
Example on jsfiddle.

You can't exactly "move" elements in jQuery (as far as I know), per se, but you can remove them and insert them somewhere else.
$("#eg").remove().insertAfter("#eg1");
EDIT: This is not true. You can move DOM elements wherever you like.

Any change you make to the DOM will be reflected on the screen. You don't have to handle that separately.