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>

How can i remove span tags from elements?

I want to remove all the span tags having class article and attach a new span tags to the content
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
In the javascript i've a text,
var text = "bar lorem ipsum";
I want javascript to find this in the DOM and if it is there, then remove the span tags from the elements and put all of them in a single span tag, like this
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar lorem ipsum</span>
</div>
Any help would be greatly appreciated.

You can use jQuery each() function for this, check updated snippet below:
var newHTML ='';
$('.asd span.article').each(function(){
newHTML += $(this).text() + " ";
$(this).remove();
})
$('.asd').append("<span class='article'>"+newHTML+"</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>

Here you check with jquery:
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>
Js
$(".article").remove();
$(".asd").append('<span class="article">bar lorem ipsum</span>');
Hope this helps you.

Try this .use with each function jquery .check the class name includes in array .Is not Then pass the the class name to array .
And also added the respected text with eq(0)(first element of same classname)
var arr=[];
$('.asd').children('span').each(function(a){
var cls =$(this).attr('class');
if(!arr.includes(cls)){
arr.push(cls);
}
else{
$('.'+cls).eq(0).text($('.'+cls).eq(0).text()+' '+$(this).text())
$(this).remove()
}
})
console.log($('.asd').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="asd">
<span class="location">Foo</span>
<span class="article">bar</span>
<span class="article">lorem</span>
<span class="article">ipsum</span>
</div>

How to select element by data-date attribute with jQuery?

I've tried to create a code snippet for an example of a selector I was trying to use and it's not working. Can someone eyeball it and tell me what I have wrong?
var dateDiv = null;
var expenseDate = "06/22/2016";
$(":data(date)").each(function() {
var element = $(this);
element.css("backgroundColor", element.data("color"));
});
.expense-item {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="contentWrapper">
<div data-date="06/22/2016" data-color="red">
06/22/2016
<div class="expense-body">
<div class="expense-item">
<p>
This is an expense (1)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (2)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (3)
</p>
</div>
</div>
</div>
<div data-expense-date="06/23/2016" data-color="blue">
<div class="expense-body">
06/23/2016
<div class="expense-item">
<p>
This is an expense (1)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (2)
</p>
</div>
</div>
</div>
<div data-expense-date="06/24/2016" data-color="yellow">
<div class="expense-body">
06/24/2016
<div class="expense-item">
<p>
This is an expense (1)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (2)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (3)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (4)
</p>
</div>
</div>
</div>
</div>
My code was inspired by this example:
http://api.jqueryui.com/data-selector/

You want an attribute selector:
$("[data-date]")
Fiddle: https://jsfiddle.net/j3cmo4ow/5/
If you want the :data pseudo selector to work, you need to include jQuery UI.

$("[data-color]").each(function() {
var element = $(this);
element.css("backgroundColor", element.attr('data-color'));
});
Fiddle: https://jsfiddle.net/j3cmo4ow/8/

Your issue with selector $(":data(date)")
you can select all elements with date Data using this selector : $("*[data-date]")
var dateDiv = null;
var expenseDate = "06/22/2016";
$("*[data-date]").each(function() {
var element = $(this);
element.css("background-color", element.attr('data-color'));
});
var dateDiv = null;
var expenseDate = "06/22/2016";
$("*[data-date]").each(function() {
var element = $(this);
element.css("backgroundColor", element.data("color")); // Also works if you want.
});
.expense-item {
margin-left: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentWrapper">
<div data-date="06/22/2016" data-color="red">
06/22/2016
<div class="expense-body">
<div class="expense-item">
<p>
This is an expense (1)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (2)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (3)
</p>
</div>
</div>
</div>
<div data-expense-date="06/23/2016" data-color="blue">
<div class="expense-body">
06/23/2016
<div class="expense-item">
<p>
This is an expense (1)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (2)
</p>
</div>
</div>
</div>
<div data-expense-date="06/24/2016" data-color="yellow">
<div class="expense-body">
06/24/2016
<div class="expense-item">
<p>
This is an expense (1)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (2)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (3)
</p>
</div>
<div class="expense-item">
<p>
This is an expense (4)
</p>
</div>
</div>
</div>
</div>

This fails, because the jQueryUI library is invoked over http, while the fiddle itself is loaded via https.
Therefore the script is considered as insecure.
When you run your fiddle with the console open you see the following error:
Mixed Content: The page at 'https://jsfiddle.net/j3cmo4ow/4/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js'. This request has been blocked; the content must be served over HTTPS.

The :data() selector does not work based off of HTML attributes with the prefix data-.
Instead, it matches and elements that have data stored via the jQuery function .data( "foo", value ).

Note, that the :data() selector is part of jQuery UI, and not part of the core jQuery library, so unless you include jQuery UI, that selector is not expected to work.

How To Hide And Display Multiple Divs using JavaScript

How would I go about hiding and showing multiple divs using JavaScript? I don't want to use JQuery. I can make it work for hiding and showing one div but not multiple divs. The problem originates because I'm using PHP to display multiple records. These records are included in divs which have the same ID.
document.getElementById( 'history-slider' ).addEventListener( 'click', function() {
document.getElementById('edit-slider').style.display = 'block';
document.getElementById('history-slider').style.display = 'none';
}, false );
document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {
document.getElementById('history-slider').style.display = 'block';
document..getElementById('edit-slider').style.display = 'none';
}, false );
.edit-slider {
display: none;
}
<div class="panel-body panel-strip" id="history-slider">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
</p>
</div>
<hr class="calendar-divider">
<div class="panel-body panel-strip edit-slider">
<div class="row pull-right">
<a href="add.php">
<div class="col-xs-4 delete-panel">
<img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 edit-panel">
<img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 record-panel">
<img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
</div>
</a>
</div>
</div>
HTML;
<div class="panel-body panel-strip" id="history-slider">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
</p>
</div>
<hr class="calendar-divider">
<div class="panel-body panel-strip edit-slider">
<div class="row pull-right">
<a href="add.php">
<div class="col-xs-4 delete-panel">
<img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 edit-panel">
<img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 record-panel">
<img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
</div>
</a>
</div>
</div>
JavaScript;
document.getElementById( 'history-slider' ).addEventListener( 'click', function() {
document.getElementById('edit-slider').style.display = 'block';
document.getElementById('history-slider').style.display = 'none';
}, false );
document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {
document.getElementById('history-slider').style.display = 'block';
document..getElementById('edit-slider').style.display = 'none';
}, false );
I have also set in the CSS to hide the "edit-slider" div on page load.
.edit-slider {
display: none;
}
The HTML is echoed out in a loop for every record in the database. Information is also added in replace of the placeholder text.
How should I best go about making it so that if a div if clicked it is hidden and the corresponding div is shown in it's place?
I was thinking about doing something about individually giving the divs separate ID's in PHP and than passing those ID's to JavaScript and creating some sort of a loop? My knowledge of JavaScript isn't massive so I don't really know how easy or difficult this method would be. Or is there a much easier method?
This is my first stack overflow post,so sorry if I'm doing anything wrong or missed something.

If you use classes instead of IDs you can use document.QuerySelectorAll() to get all the divs with that class and then show or hide as necessary.
Something like below would hide all divs with an edit-slider class and reveal (assuming they were already hidden) all divs with a history-slider class.
(function() {
var editSliders = document.querySelectorAll('div.edit-slider');
for(var i=0;i<editSliders.length;i++){
editSliders[i].style.display = 'none';
}
var historySliders = document.querySelectorAll('div.history-slider');
for(var i=0;i<historySliders.length;i++){
historySliders[i].style.display = 'block';
}
})();

First, consider using class instead of id to set multiple elements with the same attribute and value. Then, use the following script:
<script type="text/javascript">
document.querySelectorAll('div.history-slider').forEach(item => {
item.addEventListener("click", myFunction);
});
function myFunction() {
this.hide;
}
</script>

jQuery Traversal -- Find an Element Relative to Common Ancestor

I frequently find I'm needing to select an element that is nearby, typically within a common container, but which is not a sibling or within the same "tree line". For example, given this HTML:
<div id="container-left" class="container">
<div class="sidebar">
<button class="more-link">Show Extras</button>
</div>
<div class="content">
<div class="tidbits">
<p>Lorem ipsum beep bop boop</p>
<p class="extra hidden">Exxtra info about lorem ipsum!</p>
</div>
</div>
</div>
<div id="container-right" class="container">
<div class="sidebar">
<button class="more-link">Show Extras</button>
</div>
<div class="content">
<div class="tidbits">
<p>Lorem ipsum beep bop boop</p>
<p class="extra hidden">Exxtra info about lorem ipsum!</p>
</div>
</div>
</div>
What I'll do is attach an event listener to the "Show Extras" buttons, which target the p tags with class of extra, and on click, toggle the hidden class. So (using jQuery) I typically select like this:
$(".more-link").on("click",function(){
var $this = $(this);
var $extraElement = $this.closest(".container").find(".extra");
$extraElement.toggleClass("hidden");
});
My question: is there a better way to select the extra element than the .closest().find() combo? Something about it just feels a little clunky.

well.. you could navigate to sidebar siblings and find extra... but the mess would be similar...
Other way to do it is to generate a HTML5 data attribute at button:
<button class="more-link" data-extra='#some-generated-extra-id'>Show Extras</button>
...
<p id='some-generated-extra-id' class="extra hidden">Exxtra info about lorem ipsum!</p>
your code:
$(".more-link").on("click",function() {
var $extraElement = $($(this).data('extra'));
$extraElement.toggleClass("hidden");
});