jQuery search matching string and remove parent div - javascript

I've an HTML below:
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
and I would like to remove the parent DIV (container) and it's content if a child span contains a word, "this" for example.
The code should search for the word "this" on all spans and delete the divs with the Id "container0" and "container2". I already have the Regex but I'm totally lost after that. I know that I should use querySelector but I never used it before and tried to make it work, but I failed.
/\<span id="term[0-9]{3,}"> this<\/span>/gm
Thank you,


You can use the :contain() selector.
$(document).ready(function(){
$("#keywords").find("span:contains('this')").each(function(){
if($(this).next("span").html()==" is"){ // Watch out for leading space!!!
$(this).parent("div").remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> this</span>
<span id="term014"> deserves</span>
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>


You can accomplish what you are looking for with jquery by doing something like the following (since you mentioned querySelector, you should know that it can be done with plain javascript as well - see the second code example below).
JQuery:
const spans = $('span');
spans.each(function(index, elem) {
if (elem.textContent.toLowerCase().indexOf('this') >= 0) {
elem.parentNode.remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>
Javascript only:
const spans = document.querySelectorAll('span');
for (const span of spans) {
if (span.textContent.toLowerCase().indexOf('this') >= 0) {
span.parentNode.remove();
}
}
<div id="keywords">
<div id="container0">
<span id="term010"> this</span>
<span id="term111"> is</span>
<span id="term212"> a</span>
<span id="term313"> phrase</span>
</div>
<div id="container1">
<span id="term014"> exact</span>
<span id="term115"> match</span>
<span id="term216"> type</span>
</div>
<div id="container2">
<span id="term017"> this</span>
<span id="term118"> is</span>
<span id="term219"> a</span>
<span id="term320"> broad</span>
</div>
</div>

Related

How to hide multiple elements and display only one item from each container

I want to hide all span elements and display just one from its parent container(coin).
The output of what I want to achieve should display just "1" and "first" while the others will be hidden.
<div class="types" >
<div class="coin">
<span class="num">1</span>
<span class="num">2</span>
<span class="num">3</span>
</div>
<div class="coin">
<span class="num">first</span>
<span class="num">second</span>
<span class="num">third</span>
</div>
</div>

If you want to do it in Jquery. You can do like below with each() and access the first child with children() and first().
$(".coin").each(function () {
$(this).children().first().hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="types">
<div class="coin">
<span class="num">1</span>
<span class="num">2</span>
<span class="num">3</span>
</div>
<div class="coin">
<span class="num">first</span>
<span class="num">second</span>
<span class="num">third</span>
</div>
</div>

What about doing it with pure css?
.num:nth-child(n+2) {
display: none;
}
<div class="types">
<div class="coin">
<span class="num">1</span>
<span class="num">2</span>
<span class="num">3</span>
</div>
<div class="coin">
<span class="num">first</span>
<span class="num">second</span>
<span class="num">third</span>
</div>
</div>

get the number from class name

I have the div section which is generated dynamically which the class name ends with number.I want to get the number from the class attribute
I want to get the number from the class submission-1 (1),submission-2 (2) and tried as in snippet.I caught the error undefined match function.how to get the number from class attribute
$(document).ready(function(){
var num = $('.submission-').attr('class').match(/\d+$/)[0];
console.log(num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>

Try this
$(document).ready(function(){
var classes = $('[class*=submission]').map(function(_,cl) {
return cl.className.split(" ")[1].split("-")[1]; // or just cl.className.split("-")[1];
}).get();
console.log(classes);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>
Recommendation - use data attributes instead if you can change server code:
$(document).ready(function(){
var classes = $('[data-submission]').map(function(_,sub) {
return $(this).data("submission");
}).get();
console.log(classes);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform" data-submission="2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform" data-submission="3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform" data-submission="4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform" data-submission="12">
<span class="first">12</span>
<span class="second">1212</span>
</div>

You can construct them from the array but since you are looking for a class submission- which doesn't exist you can take into account a common class that exists webform then you can use method get() which converts the jQuery selection novelist into an array and map them to extract the index
$(document).ready(function() {
var indexArray = $('.webform').get().map(element => +element.classList.toString().match(/\d+$/)[0]);
console.log(indexArray);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>

Why don't you use .split("-").pop() like this and also if you need number from all elements then you will need to iterate through all elements like this.
$(document).ready(function(){
var num = [];
$("div[class*=' submission-']").each(function(){
num.push($(this).attr('class').split("-").pop());
});
console.log(num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="webform submission-1">
<span class="first">1</span>
<span class="second">11</span>
</div>
<div class="webform submission-2">
<span class="first">2</span>
<span class="second">22</span>
</div>
<div class="webform submission-3">
<span class="first">3</span>
<span class="second">33</span>
</div>
<div class="webform submission-4">
<span class="first">4</span>
<span class="second">44</span>
</div>
<div class="webform submission-12">
<span class="first">12</span>
<span class="second">1212</span>
</div>

How do I hide multiple div's with no content?

I have the following code:
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div>
</div>
This content box is generated. I want to hide it if there's no content being generated on the backend. How do I do it? I already tried
if ($('.contentMachine').is(':empty')) {
$('.contentMachine').remove();
}
But it's still not hiding the div's
Here's the fiddle

You need to removed matched elements, so :empty selector with class selector to get the reference of empty elements then apply .remove() method
$('.contentMachine:empty').remove()

You can use pseudo selector empty:
$('.contentMachine:empty').remove();
Update:
You can retrieve the content of contentMachine as a text then play with the result:
$('.contentMachine').each(function () {
var text = $(this).text();
text = text.replace(/(\n|\s)*/mg, '');
if (text === '') {
$(this).remove();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div>
</div>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbarsd">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestampd" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-textd">With content</span>
</div>
</div>
Last update:
You can achieve it by checking all empty element into .contentMachine:
$('.contentMachine :empty').remove();
Demo

Try this:
content = $('.contentMachine').text();
content = $.trim(content);
if (content.length == 0) {
$('.contentMachine').remove();
}

if .contentMachine this div completely has no text anywhere it will remove by this script. I do it with help of rejex.
var regex = "/^.+\s.+$/" ;
$(document).ready(function(){
console.log($(".contentMachine").text().match(regex));
if ($(".contentMachine").text().match(regex) ==null|| $(".contentMachine").text().match(regex) == 0) {
$(".contentMachine").remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">
<div class="contentTop">
<span class="ledbars" id="DeviceDemo_001-ledbars">
<span class="ledBar ledbar-1"></span>
<span class="ledBar ledbar-2"></span>
<span class="ledBar ledbar-3"></span>
<span class="ledBar ledbar-4"></span>
<span class="ledBar ledbar-5"></span>
</span>
<span class="timeBox">
<span id="DeviceDemo_001-content-timestamp" class="timeimg"> </span>
</span>
</div>
<div class="contentBox">
<span id="DeviceDemo_001-content-text"></span>
</div></div>

Try this one
jQuery( '.contentMachine:empty' ).remove();

jQUERY: Count elements which have do not have a class

I want to get the number of span tags which have class assigned-names but do not have a class named hidden. Following is the HTML code:
<div class="assigned-values">
<span class="assigned-names">
<span class="name">Test 1</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 2</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 3</span>
</span>
</div>
So, for the above HTML, The number of span tags which have class assigned-names but do not have class hidden is 1.
I have tried following code, but it gives me length as 2:
$('.assigned-values').find('span.assigned-names:not(:has(.hidden))').length

You can simply filter out the non-required elements using not() function:
const elems = $(".assigned-values > .assigned-names").not(".hidden");
console.log(elems.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assigned-values">
<span class="assigned-names">
<span class="name">Test 1</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 2</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 3</span>
</span>
</div>

You can use .not('span.hidden'). .not() method remove elements from the set of matched elements.
console.log($('.assigned-values').find('span.assigned-names').not('span.hidden').length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="assigned-values">
<span class="assigned-names">
<span class="name">Test 1</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 2</span>
</span>
<span class="assigned-names hidden">
<span class="name">Test 3</span>
</span>
<span class="assigned-names">
<span class="name">Test 1</span>
</span>
</div>

First of all, your JQuery code has missed an 's' in 'span.assigned-name'
I have tried the following code and it works
var element = $('.assigned-values').find('span.assigned-names').not('.hidden').length
console.log(element.length);
The code outputs the value as 1

How to make function check class instead of text of elements

This is my working fiddle:
https://jsfiddle.net/axpbe377/6/
This is the structure of the elements now. Note: class Name and Text for each span is the same.
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>Mon</span>
<span class='Tue'>Tue</span>
<span class='Wed'>Wed</span>
<span class='Thrs'>Thrs</span>
<span class='Fri'>Fri</span>
<span class='Sat'>Sat</span>
<span class='Sun'>Sun</span>
</div>
But I want to change the span text to this now.
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
How do I change the script below, to check for each span's class that matches data for each user, instead of span's text that matches.
$("div.morning_"+ user_id +" span").filter(function(){
return mornings.indexOf(this.innerHTML) > -1;
}).css('color', '#26F525');

use this.className instead of this.innerHTML
$("div.morning_"+ user_id +" span").filter(function(){
return mornings.indexOf(this.className) > -1;
}).css('color', '#26F525');

You can use hasClass()
// From mornings array, create a string.
// The class names are separated by space
// So can be passed directly to hasClass
var strClasses = mornings.join(' ');
$("div.morning_" + user_id + " span").filter(function () {
// If this element has class from the array, return true
return $(this).hasClass(strMornings);
}).css('color', '#26F525');
You can also use Array#join to create a selector from array and use it directly.
"div.morning_" + user_id + " span." + mornings.join(", div.morning_" + user_id + " span.")
this will give the selector as
div.morning_562f7e42757eb span.Mon, div.morning_562f7e42757eb span.Tue, div.morning_562f7e42757eb span.Sat
which can be passed to jQuery object directly.
Demo:
var mornings = ['Mon', 'Tue', 'Sat'],
user_id = '562f7e42757eb';
var selector = "div.morning_" + user_id + " span." + mornings.join(", div.morning_" + user_id + " span.");
$(selector).css('color', '#26F525');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>

Another way is to use a class filter like
var param = 'Mon,Fri',
user_id = '562f7e42757eb';
var mornings = param.split(',');
$("div.morning_" + user_id + " span").filter(mornings.map(function(value) {
return '.' + value.trim()
}).join()).css('color', '#26F525');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='afternoon_562f7e42757eb'>Afternoon:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='evening_562f7e42757eb'>Evening:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
</div>
<br/>
<br/>
<div id='2'>
<div class='morning_562f7eae12fd7'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='afternoon_562f7eae12fd7'>Afternoon:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='evening_562f7eae12fd7'>Evening:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
</div>
or
var param = 'Mon,Fri, Sun',
user_id = '562f7e42757eb';
var filter = '.' + param.replace(/\s*,\s*/g, ', .').trim();
$("div.morning_" + user_id + " span").filter(filter).css('color', '#26F525');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1'>
<div class='morning_562f7e42757eb'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='afternoon_562f7e42757eb'>Afternoon:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='evening_562f7e42757eb'>Evening:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
</div>
<br/>
<br/>
<div id='2'>
<div class='morning_562f7eae12fd7'>Morning:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='afternoon_562f7eae12fd7'>Afternoon:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
<div class='evening_562f7eae12fd7'>Evening:
<span class='Mon'>M</span>
<span class='Tue'>T</span>
<span class='Wed'>W</span>
<span class='Thrs'>T</span>
<span class='Fri'>F</span>
<span class='Sat'>S</span>
<span class='Sun'>S</span>
</div>
</div>

Categories