This question already has answers here:
How to add/remove a class in JavaScript?
(13 answers)
Closed 7 years ago.
I have the following classes (below), they are added dynamically on the HTML (below).
I have classes already present, what Javascript recommended code should be used to remove one or all of these classes if they are already present on the html below. The function I am building, will reset the element, I NEED the current classes to be present, but the colour classes need to be removed if one / multiple values are present.
HTML
<div id="overlay__inner" class="overlay__inner overlayActive clearfix"></div>
Classes
<ul>
<li>is--blue</li>
<li>is--red</li>
<li>is--yellow</li>
<li>is--purple</li>
<li>is--green</li>
<li>is--pink</li>
<li>is--orange</li>
</ul>
UPDATE:
So in a nutshell, I want to do this jQuery example in javascript:
$('#overlay__inner').removeClass('is--blue is--red is--yellow is--purple is--green is--pink is--orange');
This is what I have so far:
document.getElementById('overlay__inner').classList.remove('is--blue').classList.remove('is--red').classList.remove('is--yellow').classList.remove('is--purple').classList.remove('is--green').classList.remove('is--pink').classList.remove('is--orange');
But I get this error:
Uncaught TypeError: Cannot read property 'classList' of undefined
Removing a single class is rather straightforward, what are you having trouble with specifically?
var els = document.querySelectorAll('.is--blue');
Array.prototype.forEach.call(els, function(el) {
el.classList.remove('is--blue');
});
.is--blue {
color: blue;
}
<p class="is--blue something-else">Sample</p>
<p class="is--blue">Sample</p>
Related
This question already has answers here:
Iterating over result of getElementsByClassName using Array.forEach
(14 answers)
Closed 7 months ago.
I have below div tag from material UI which is getting autogenerated through MUI -
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
Through javascript , I am fetching this element as -
var ele=document.getElementsByClassName("MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault");
console.log(ele);
In console log I am able to see element with all its properties including innerHTML as Some Text
When I am trying to change the InnerHTML by -
ele[0].innerHTML="Changed Text" , I am not able to see that text got changed.
Also , before this , when I try to log innerHTML -
console.log(ele[0].innerHTML) , I am getting blank result.
How can I change the inner HTML from HTML Collection I am fetching ?
You have missed two things:
Typo in getElementsByClassName -> should be getElementByClassName
If you put spaces in your class name inside getElementsByClassName like MuiAvatar-root MuiAvatar-circular, its not correct.
var ele = document.getElementsByClassName("MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault");
ele[0].innerHTML = "TEST"
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
This question already has answers here:
Native javascript equivalent of jQuery :contains() selector
(6 answers)
Closed 3 years ago.
I'm making a chrome extension and i want to do an action when a certain element exist on the page. But the class element isn't precise enough to select the element only by it's class.
the element i'm looking for on pages is the following :
<span class="btn-text">M'y emmener</span>
I tried :
const listfull = document.querySelector('.btn-text:contains("m\'y emmener")');
if (listfull) {
console.log("hello")
}
But it doesn't seems to work anybody could tell me how this works ?
:contains is jQuery-specific syntax. It's also case-sensitive. To achieve what you're looking for, either use jQuery and capitalize the M:
const listfull = $(`.btn-text:contains("M'y emmener")`);
if (listfull.length) {
console.log("hello")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="btn-text">M'y emmener</span>
Or iterate over all matches of .btn-text and check their textContent:
const listfull = [...document.querySelectorAll(`.btn-text`)]
.find(elm => elm.textContent.includes("M'y emmener"));
if (listfull) {
console.log("hello")
}
<span class="btn-text">M'y emmener</span>
This question already has answers here:
`find()` undefined is not a function
(4 answers)
Closed 6 years ago.
I get an error on the line targetTD[6].find('textarea').text() saying targetTD[6].find is not a function. (In 'targetTD[6].find('textarea')', 'targetTD[6].find' is undefined)
$(document).ready(function () {
$(document.body).on('click','.edit',function () {// use button class ince ID has to be unique per button
var targetTD;
if( $(this).find('i').hasClass('glyphicon-edit'))
{
targetTD = $(this).parents('tr').find('td'); // gives all TDs of current row
if (targetTD[6].firstChild.children.length) // the value cell is what we want
{
// targetTD[6].firstChild.children.item().setAttribute('readonly','false');
alert(targetTD[6].find('textarea').text());
}
I am trying to find a text area within a <td><div> <textarea readonly> some text </textarea><div><td>. How can I remove the readonly property ? Why cant I use find ?
Try to replace:
targetTD[6].find('textarea').text();
With:
$(targetTD[6]).find('textarea').text();
Because targetTD is an array with not wrapped elements. Also, to remove readonly property use:
$(targetTD[6]).attr("readonly", false);
targetTD[6] is a native JavaScript node. You need to wrap it in a jQuery selector $()
Like so: $(targetTD[6]).find
This question already has answers here:
Click event doesn't work on dynamically generated elements [duplicate]
(20 answers)
Closed 8 years ago.
This was a dublicate question, George's link to a previous question had my answer
I'm having an issue where selectors aren't functioning with dynamically generated javascript content.
The initial works just fine. Once the for loop generates more div's, even though it's got the same class, the 'mouseover' css styling won't apply.
Code that Generates the divs:
for (x; x < y; x++) {
output = output + '<div class="over">'+
'But not for these generated divs'+
'</div>';
}
$("#content").html(output);
Code that styles the divs with class "over":
$(".over").hover(function () {
$(this).addClass("styling");
});
$(".over").mouseout(function () {
$(this).removeClass("styling");
});
http://jsfiddle.net/kjhansen/1e08ypms/28/
Use jQuery on() Try this:
$(document).on('mouseover','.over',function () {
$(this).addClass("styling");
});
$(document).on('mouseout','.over',function () {
$(this).removeClass("styling");
});
FIDDLE EXAMPLE
This question already has answers here:
JavaScript DOM remove element
(4 answers)
Remove element by id
(19 answers)
Closed 8 years ago.
I'm using this widget/snippet:
<div class="tbnet-gadget">
<div id="tbnet-g4">Carregando...</div><a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
<script async src="http://gadgetsparablog.com/ws/tabeladobrasileirao/script?funcao=g4&campeonato=serie-a" type="text/javascript"></script>
</div>
This widget forces a link on the bottom of it (Tabela do Brasileirão). If I change the href tag, the widget won't work.
I want to still use this widget, but I'm trying to remove that link from the bottom of it.
I managed to remove the href attribute using document.getElementById("tbnet-link").removeAttribute("href");, but the text "Tabela do Brasileirão" is still showing up.
This is how it looks like on JSFiddle: http://jsfiddle.net/3nhwf6tw/
How can I remove the whole <a id="tbnet-link"...Brasileirão</a> using javascript?
Thanks.
http://jsfiddle.net/3nhwf6tw/#&togetherjs=1DF8EF6xuh
How about just using CSS instead:
#tbnet-link{
display: none !important;
}
JSFiddle
Here is the non-CSS version (which is a bit ridiculous):
You can remove this:
<a id="tbnet-link" href="http://www.tabeladobrasileirao.net/" target="_blank" class="tbnet-link" title="Tabela do Brasileirão">Tabela do Brasileirão</a>
If you add this jQuery and remove the script in your html:
$.getJSON("http://54.207.27.130/ws//tabeladobrasileirao/g4.jsonp?callback=?&campeonato=serie-a&time=None", function(k) {
$("#tbnet-g4").html(k.html.replace(/\<script.*?\<\/script\>/, ""));
});
JSFiddle no-CSS
To remove the element:
var el = document.getElementById("tbnet-link");
el.parentNode.removeChild(el);
To just clear the text:
var el = document.getElementById("tbnet-link");
el.innerHTML = ""
If you're up for jQuery, it's really easy:
$(function(){
$("#tbnet-link").remove();
});