Develop Reference

Find and remove element with specific content

i have lots of <p> &nbsp </p> tags in the middle of description contents. i want to find and remove the tags containing only &nbsp. The description container has a class-name desc_container.
Here is the example of container,
<div class="desc_container">
<p> Some contents! <p>
<p> &nbsp </p>
<p> Again some contents! <p>
<p> &nbsp </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('&nbsp');
}
</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> &nbsp </p> for some content here <p> test data</p><p> &nbsp </p>
</div>

The :contains() selector selects elements containing the specified string. The following code will remove the <p> tag which contains &nbsp and might have other content too.
$("p:contains(&nbsp)").remove();
If you want to remove the <p> which contain only &nbsp then you can loop <p> tag and remove whose value is &nbsp
$('p').each(function(){
if($(this).text().trim() == "&nbsp"){
$(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> &nbsp </p><p>Text</p><p> &nbsp </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> &nbsp </p>
<p> Again some contents! <p>
<p> &nbsp </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>

Get text of specific element by ID using $(this) keyword

I have several boxes and inside each of the boxes I have different title and headline elements.
I would like to know how I can get the text of the desired element inside the corresponding box that has been clicked, not all of the text elements.
Here's what I'm working with:
box.onclick = function(){
alert($(this).text());
};
This displays all of the text elements data in the alert box. I would like to solely target a single specified text element that has an id to get the text from it instead.
Any help would be appreciated.

You can use find() to target the child element:
$('.box').on('click', function() {
console.log($(this).find('h3').text())
})
.box{
background: #adadad;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='boxes'>
<div class='box'>
<h3>title 1</h3>
<h4>subtitle 1</h4>
</div>
<div class='box'>
<h3>title 2</h3>
<h4>subtitle 2</h4>
</div>
<div class='box'>
<h3>title 3</h3>
<h4>subtitle 3</h4>
</div>
</div>

HTML
<div id = "content">
<div id = "box">
<p>This is the box content 1 </p>
</div>
<div id = "box">
<p>This is the box content 2</p>
</div>
</div>
JS
$('*[id*=box]:visible').each(function(index) {
$(this).click(function() {
alert($(this).text());
});
});
Test it here:
https://codepen.io/bmvr/pen/WMZPXW

How can I fade a div after the page is loaded using jQuery?

I'm trying to fade the Movies div of this HTML
<div class="row">
<div id=Movies class="col-md-4">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
and I'm using this jquery code
<script>
$(function(){$("#Movies").show("slow");
});
</script>
I've also tried this:
<script>
$(document).ready(function(){$("#Movies").fadeIn(3000);
});
</script>
But it ain't working. The page loads with no fade in. The div just loads like every other element. What's wrong with this?

Add this CSS to make it hidden, then only it will fadeIn slowly when the page loads
#Movies {
display:none;
}

For that to work; #movie has to be hidden, then show when the document is ready as the jQuery function implies.
$(document).ready(function() {
$("#movies").fadeIn(3000);
});
#movies {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div id=movies class="col-md-4">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>

First you have to hide the movies div and then fade in. Also i see that your id "Movies" is not withing quotes in the question code snippet. Hope it helps.
Html
<div class="row">
<div id="Movies" class="col-md-4" style="display:none">
<h2>Movies</h2>
<p>Some text.</p>
</div>
</div>
Javascript
$(document).ready(function(){
$("#Movies").fadeIn(3000);
});

How to hide a DIV element using RegEx and Jquery

I would like to hide all other element except class="imagebrowser" in following,
<div class="entry">
<p>Heading 1</p>
<p>Heading 2</p>
...
<p>Heading n</p>
<b>This is abold text</b>
<div>This is a div element</div>
<div class="imagebrowser">
Hello world
</div>
</div>
Expected result,
<div class="entry">
<div class="imagebrowser">
Hello world
</div>
</div>
Any help please

Try this
$(".entry").children(":not(.imagebrowser)").hide();

$('div.entry div').not('.imagebrowser').hide();
This will hide all divs inside the "entry" div other than those with the class "imagebrowser".

Have you tried:
$('.entry').children().hide();
$('.imagebrowser').show();
This should hide all the contents of the entry div, including the p tags, and then show the imagebrowser div afterwards.

This code worked for me. You can replace $(this).val() with #target
$('.'+ $(this).val()).show(); $('.tabcontent2 tr:not(.'+ $(this).val() +')').hide();

Jquery div expands all divs on page

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".link").click(function()
{
jQuery("div.content").slideToggle(500);
});;
});
</script>
How to expand only the div which is linked to the specific link?
Edit:
Its done like this
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
<div class="content">
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
</div>

EDIT 2:
You changed your HTML. Now do this:
jQuery(this).closest('div.comment').next('div.content').slideToggle(500);
But wait! Now you have 2 different div.link elements in different relation to .content elements. Is this your actual HTML markup?
You could also do this:
jQuery(this).closest('div.content').slideToggle(500);
Please provide your actual HTML.
EDIT:
Based on updated question, do this:
jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);
How to expand only the div which is linked to the specific link?
How are they linked?
If the div is a descendant, do this:
jQuery(this).find('div.content').slideToggle(500);
If the div is a an ancestor, do this:
jQuery(this).closest('div.content').slideToggle(500);
If the div is the next sibling, do this:
jQuery(this).next().slideToggle(500);
If the div is the previous sibling, do this:
jQuery(this).prev().slideToggle(500);
Without seeing your HTML structure, we can only guess at the solution.

For this HTML:
<div class="blaat1">
<div class="blaat1">
<a class="link">#</a>
</div>
<div class="blaat2">
<a class="link">#</a>
</div
</div>
<div class="content">
<div class="otherdivs">
<div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
<div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
</div>
</div>
Use this JS:
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$(".link").click(function() {
var blaat = $(this).parent().attr("class");
$(blaat+"_div").slideToggle(500);
});;
});
</script>
I haven't tested that, but it should work.

Try this:
$(".link").click(function(){
$(this).parents('div.content').slideToggle(500);
});;