<div>
<p>
<img>
</p>
<p></p>
<p></p>
</div>
How to remove the first <p></p> but not the childs (img)?
you can use .unwrap()
to unwrap the first p you have to specify the select as first() p also
$("p").first().contents().unwrap()
Working Demo:
$("p").first().contents().unwrap()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<p>
<img>
</p>
<p>aaa
</p>
<p>
</p>
</div>
Related
The output of the following code snippet
<body>
<div id="hello">
<p></p>
<p></p>
</div>
<script>
const node = document.getElementById('hello');
console.log(node);
</script>
</body>
is as follows
<div id="hello">
<p></p>
<p></p>
</div>
This is expected behavior.
But if I change the element containing id=hello from <div> to <p>, it does not output the child elements.
<body>
<p id="hello">
<p></p>
<p></p>
</p>
<script>
const node = document.getElementById('hello');
console.log(node);
</script>
</body>
Its output becomes
<p id="hello">
</p>
Why is this so?
<p> elements cannot contain other block elements. A <p> ends when then next block element starts. That's just how HTML works. Thus your nested <p> ends the "parent" <p>, which isn't really a parent.
That's also why it's true that you don't have to close <p> elements. They close implicitly. Same goes for <li> and some others.
i have lots of <p>   </p> tags in the middle of description contents. i want to find and remove the tags containing only  . The description container has a class-name desc_container.
Here is the example of container,
<div class="desc_container">
<p> Some contents! <p>
<p>   </p>
<p> Again some contents! <p>
<p>   </p>
</div>
<script>
jQuery(document).ready(function(){
// This will give me all the <p> tags
$('.desc_container').find('p');
// This is what i want
$('.desc_container').find('p').containsOnly(' ');
}
</script>
Appreciate the help. Thanks!
You need to check the $(this).html().trim() === ' ' inside the loop for each <p> element and remove the <p> element. You can use browser's inspect element option in the below example for further verification.
$(document).ready(function(){
$('.desc_container p').each(function(){
if($(this).html().trim() === ' '){
$(this).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
<p> This is a example </p> <p>   </p> for some content here <p> test data</p><p>   </p>
</div>
The :contains() selector selects elements containing the specified string. The following code will remove the <p> tag which contains   and might have other content too.
$("p:contains( )").remove();
If you want to remove the <p> which contain only   then you can loop <p> tag and remove whose value is  
$('p').each(function(){
if($(this).text().trim() == " "){
$(this).remove();
}
});
You don't need to use find since you can simply select all <p> tags inside the desc_container.
Just use the following selector: $('.desc_container p') or jQuery('.desc_container p') if you haven't mapped the jQuery object to $.
This will return you all the Nodes, which can be looped with jQuery's each method and then removed with .remove(). Also, make sure to trim the string before comparing.
$(document).ready(function(){
$('.desc_container p').each(function() {
if($(this).html().trim() === ' '){
$(this).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
<p>Text</p> <p>   </p><p>Text</p><p>   </p>
</div>
You can try following
$(document).ready(function(){
$(".desc_container p").each(function(){
if($(this).text().trim() == "") {
$(this).remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
<p> Some contents! <p>
<p>   </p>
<p> Again some contents! <p>
<p>   </p>
</div>
$("#deleteEmpty").on('click', function() {
$(".desc_container p").each(function(index, element) {
var $element = $(element);
if ($element.html().trim() === " ") {
$element.remove();
}
});
});
.desc_container p {
padding: 5px 8px;
background-color: #EEE;
margin: 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desc_container">
<p> </p>
<p>Sample text here</p>
<p> </p>
<p>Sample text here</p>
<p> </p>
<p>Sample text here</p>
<p>Sample text here</p>
<p>Sample text here</p>
<p> </p>
<p></p>
<p>Sample text here</p>
</div>
<button id="deleteEmpty">Delete empty `p` tags</button>
I am trying to wrap content in a div but the problem is the html page is not editable so I am trying other way, using jQuery to wrap all the content in a div following is the html structure
$(document).ready(function() {
$("hr").before("<div class=wrapElement>");
$("#disqus_thread").before("</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>
Problem opening div is placed on correct position, but closing div is not on correct position, it should be above div id="disqus_thread" but its not there, how do I get it placed on this position?
jQuery version is 1.12.4
thanks in advance
Use nextUntil() method to get all elements upto the div and use wrapAll() method to wrap them using a div element.
$(document).ready(function() {
$("hr").nextUntil("#disqus_thread") // get elements from hr upto the previous element of #disqus_thread
.wrapAll("<div class=wrapElement></div>"); // wrap all elements using div
});
$(document).ready(function() {
$("hr").nextUntil("#disqus_thread").wrapAll("<div class=wrapElement></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>
Or, you can just use built-in jQuery functions:
Here's a fiddle: https://jsfiddle.net/uhr4kuk6/5/
$(document).ready(function() {
$('hr').remove();
$('h4').wrap('<div class="wrapElement">').prepend('<hr>');
$('p').each(function() {
var getContentWithTags = $(this).clone();
$('.wrapElement').append(getContentWithTags);
$(this).remove();
})
});
.wrapElement {
background: red;
padding-top: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<hr>
<h4>Title Here</h4>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div id="disqus_thread"></div>
If you have a container you can use jQuery wrapInner() method, easly :
$( "body" ).wrapInner( "<div class='wrapElement'></div>");
Suppose your content is inside the body tag:
var mainhtml= $('body').find('*').not('#thread_content').html()
$('#thread_content').html(mainhtml);
Try this..
<hr>
<h4>Title Here</h4>
<p> </p>
<p> </p>
<p> </p>
<div id="disqus_thread"></div>
$(document).ready(function() {
$("body").wrapInner("<div class=wrapElement></div>");
});
Says I have DOM like below :
<div>
<span>a</span>
</div>
<div>
<span>c</span>
</div>
<div>
<span>b</span>
</div>
<div>
<span>a</span>
</div>
<div>
<span>b</span>
</div>
How to remove duplicated element above? I thought of foreach, text() and remove() but I don't know how to do the comparison.
$('div').foreach(function(){
// how to compare here?
$(this).find('span').text();
});
I am trying to wrap some selected elements in <blockquote> tags but the method I thought might work replaces the existing tags rather than wrapping them.
Here's my code.
$("input[value='Quote']").on("click", function() {
document.execCommand('formatBlock', false, '<blockquote>');
});
and...
<div contentEditable>
<p>para 1</p>
<p>para 2</p>
</div>
<input type="button" value="Quote" />
I want to end up with something like this...
<div contentEditable>
<blockquote>
<p>para 1</p>
<p>para 2</p>
</blockquote>
</div>
rather than the following which is what I currently get...
<div contentEditable>
<blockquote>
para 1
<br />
para 2
</blockquote>
</div>
Thanks
This should do it
$("input[value='Quote']").on("click", function() {
$("<blockquote/>").insertBefore($("[contenteditable]").find("p:first")).append($("[contenteditable]").find("p"))
});