How can I modify the class list via jQuery or JavaScript for multiple classes in one step?
I have several classes in my form like
<div class="form-group has-error has-feedback">...</div>
<div class="form-group has-error has-feedback">...</div>
<div class="form-group has-error has-feedback">...</div>
How can I remove all the classes except form-group?
<div class="form-group">...</div>
<div class="form-group">...</div>
<div class="form-group">...</div>
You can use the .removeClass() method.
$(".form-group.has-error.has-feedback").removeClass("has-error has-feedback");
From the jQuery Documentation:
Description:
Remove a single class, multiple classes, or all classes from each
element in the set of matched elements.
...
If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.
JQuery
You can do it using attr function :
$('div.form-group.has-error.has-feedback').attr('class', 'form-group');
JAVASCRIPT
For javascript you can use querySelector and setAttribute() function :
document.querySelector('div.form-group.has-error.has-feedback').setAttribute('class', 'form-group');
Hope this helps.
Related
I have multiple classes with different number of fields inside them, 1 class example:
<div class="row form-row-extra-phone spacer">
<div class="col-12">
<div class="input-group">
<input type="tel" name="extraPhone-0-phone_number" class="form-control" placeholder="Extra Phone Number" maxlength="128" id="id_extraPhone-0-phone_number">
<div class="input-group-append">
<a class="btn btn-success btn-circle btn-sm add-form-row" href="#" role="button" id="plus_payment_data">+</a>
</div>
</div>
</div>
</div>
I want to iterate on all the fields inside the classes that have the attribute "name" and "id" , and add 1 to the number inside (in the example name="extraPhone-0-phone_number" -> name="extraPhone-1-phone_number")
I can select the class by:
$('.form-row-extra-phone')
How can I iterate on all the fileds inside it that contain the attributes 'name' and 'id'?
I assume you mean <div class="row form-row-extra-phone spacer"> when you speak about a class? This is an element, not a class.
Class can be a problematic term, because it can refer to CSS/DOM classes or Javascript classes, which are totally unrelated.
So if you have <div class="something"> then something is a CSS/DOM class, but the entire thing is not that class but an element having that class.
Now also what you refer to by fields are also just elements.
So what you want is to select all elements that have the class form-row-extra-phone and of them all descendant elements with an name attribute. And thats pretty easy. Basically in a CSS selector the (space) is the selector for descendant elements.
So you can select .form-row-extra-phone [name].
So what you probably want is something like this:
document.querySelectorAll('.form-row-extra-phone [name]')
.forEach(elem => elem.name.replace(/[0-9]/, x => Number(x) + 1));
When you use ^= it means starts with, and $= means ends with.
If condition is (name AND id)
$('.form-row-extra-phone input[name^="extraPhone"][id^="id_extraPhone"]')
If condition is (name OR id)
$('.form-row-extra-phone input[name^="extraPhone"],input[id^="id_extraPhone"]')
check this https://api.jquery.com/multiple-attribute-selector/ or google for "jQuery Multiple attributes selector"
I am trying to bind a class name inside Angular ngClass so that the user will be able to set any class name he likes to the element.
I have the following in my js file and would like to assign this class name to the div element if this.customClass is set.
this.customClass= "list-custom-class";
HTML
<div class="row" [ngClass]="'{{customClass}}'}"></div>
To bind class
<div class="row" [ngClass]="customClass"></div>
please check the below
https://angular.io/api/common/NgClass
You can't use string interpolation in ngClass.Please use below it may help.
[ngClass]="[customClass]"
<div class="row {{customClass}}"></div>
No need of using ngClass.
I have a div which I would like to hide along with all of its children. I thought that a simple selector.hide() would do the trick but it's still there.
HTML
<div class="row well">
<div class="artistAlbumInfo well col-md-6 ">
<h3><span id="artist"></span> - <span id="track"></span></h3>
<img src="" id="art" class="albumArt">
</div>
<div class="col-md-6">
<h3 id="album"></h3>
<h4>Playstate <p id="playState"></p></h4>
<h4>Position <p id="position"></p></h4>
</div>
</div>
JQuery
$(document).ready(function() {
$('.row .well').hide();
});
http://jsfiddle.net/375c8v2a/1/
Any ideas?
You don't need a space between classes if you want to hide only those with both classes
$('.row.well').hide();
To do either or add a comma
$('.row, .well').hide();
What you have didn't work because .row .well means "an element with class well inside (as a child or deeper descendant) an element with class row. In CSS, the space is the descendant combinator.
To seelct the element that has both classes, remove the space:
$(document).ready(function() {
$('.row.well').hide();
// ----^
});
That means "an element with class row and class well".
$('.row').hide();
please remove second class
From what I've read on the comments the .well class was intentionally created to specify which .row class will be hiding since you have a lot of row classes. Then you can use it as the trigger to hide that row, instead of doing: $('.row.well').hide(); you can just simply specify the targeted class by doing:
$('.well').hide();
Click here to see a example on jsFiddle
I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/
<div class="generic_layout_container layout_ride_ridespec">
</div>
How to programmicaly add an extra class or one more property with existing class to above div.
I would like out put as follows
<div class="generic_layout_container layout_ride_ridespec example_class">
</div>
Please excuse id/name solution, there is little difficulty to add an id or name for above element.
Thanks
MooTools does have an addClass() method. Eg:
HTML
<div id="myElement" class="testClass"></div>
Javascript
$('myElement').addClass('newClass');