remove jquery elements that do not have a class - javascript

Hi can any one help me get all elements in jquery that do not have a class.
I have a list and I want to get all of the that do not have a class and delete it
Here is the code I have so far
var listTableHeaders = $("ROI-List").find("th");
listTableHeaders.not(".sorting").remove();
I realized that there are other classes other than "sorting" as seen in this pic
I can just remove the elements that are not "sorting" or "sorting_disabled" but I am not sure if there are other classes so it would be more convenient to remove the th that do not have any class.
Thank you

You can filter it
listTableHeaders.filter(function(){
return !$(this).is('[class]');
}).remove();

Something like this:
$("ROI-List").find("th").each(function () {
if (!$(this).prop('class').length) {
$(this).remove();
}
});

I belive this will work for what you're trying to do:
$("ROI-List").find("th:not([class])").remove();

Related

Im forcing to use getElementsByClassName()[] rather than getElementByClass()

I have 8 divs with id="div1","div2","div3".... and a class=divs. I also have a button with class="div1","div2","div3"......
When I click the button with id="div1", it will first remove all the class="selected" to all div that has a class="divs" then only the div with id="div1" will have the class selected. And so on.....
I want to use document.getElementByClass() for removing class but it don't work in my FIDDLE. :(
Instead, Im forced to use document.getElementsByClassName()[]. But it seems so hard to code since it requires me to put the specific arrays for the classname.
This is exactly I want to achieve FIDDLE
There is no getElementByClass for a reason: unlike id, class is not specified to be unique in a document. Which element would you get? No, you need the ability to get all of them. And if you get an array, that's solved by looping, not by repeating rows for each index:
However, your design is inefficient; and if you're already using jQuery, you can write it very tightly. This would be better:
<button class="divbuttons" data-div="div1">div1</button>
<button class="divbuttons" data-div="div2">div2</button>
...
then you can:
$(document).ready(function(){
$('.divbuttons').click(function() {
var div = $(this).data("div");
$('.divs.selected').removeClass('selected');
$('#' + div).addClass('selected');
});
});
This is an easy one. There is no document.getElementByClass
You have document.getElementById or document.getElementByClassName
There's no such thing as getElementByClass() because multiple elements can have the same class. There's getElementById() (elements have unique ids, or at least they're supposed to) and getElementsByClassName(), which returns an array of all elements that match the class specified.
try
$(document).ready(function () {
$("button[class^=div]").click(function () {
$(".divs.selected").removeClass("selected");
$("#" + $(this).attr("class")).addClass("selected");
});
});
DEMO

Form with jQuery don't working correct

I'm trying make a form. Where when you select an option, the empty value is removed and the color changes.
But, when you change the option, all empty values are being removed at the same time.
What i have to do to resolve this?
DEMO
$(document).ready(function() {
$('.changeMe').change(function(){
$('.empty').remove();
$(this).css({'color':'black'});
});
});
Thanks in advance
http://jsfiddle.net/Cjdbx/4/
$('.changeMe').change(function(){
$('.empty',this).remove();
$(this).css({'color':'black'});
});
You are removing all classes with empty. You have to only remove the one which is related. So, use this.
Try:
$(this).find('.empty').remove();
Demo
OK, try this:
$(document).ready(function() {
$('.changeMe').change(function(){
var $this = $(this);
$this.parents("div").find('.empty').remove();
$this.removeClass("blue");
$this.addClass("black");
});
});
Basically, you need first to find the parent div (containing the row) and remove any .empty descendants.

Show each first element in a list of parent elements (jQuery+CSS)

I'm a bit stuck here. I'm trying to show the first div for each section I have using jQuery. There's multiple parent elements .each-business-content-extra which has a few child elements .each. Each .each is set to display none via the CMS, but I want the first .each in each .each-business-content-extra that exists to be set to display:block.
I tried this —
$('.each-business-content-extra .each:first').each(function() {
$(this).show();
});
Any ideas?
Thanks,
R
You can use .eq() to target the first element of each .each class. http://api.jquery.com/eq/
Try this:
$('.each-business-content-extra .each:eq(0)').each(function() {
$(this).show();
});
Alternatively, try this:
$('.each-business-content-extra .each:eq(0)').css('display', 'block');
You can do it your way, but the correct selector is :first-of-type:
$('.each-business-content-extra .each:first-of-type').each(function() {
$(this).show();
});
You can try with this simple one,
$('.each-business-content-extra .each:first-child').show();
Try
$('.each-business-content-extra').find('.each:first').show()
Demo: Fiddle
try this:
$('.each-business-content-extra').children(":first").show();
Turns out it was a combination of everyones...
$('.each-business-content-extra').each(function() {
$(this).find('.each:first').show();
});
Thanks so much.

Easy - Select only elements of this link

How do I change only elements inside of the link that is clicked?
I thought children of this would work but no luck.
$('.sort').click(function () {
$(this).children('i').toggleClass('icon-arrow-up-12');
});
Use find (api.jquery.com/find), like this:
$(this).find('i').toggleClass('icon-arrow-up-12');
Children are the immediate nodes beneath the current one. You need descendants. You also need to set the context:
$('.sort').click(function () {
$('i', this).toggleClass('icon-arrow-up-12');
});
If I understand you well:
$('.sort').click(function () {
$(this).toggleClass('icon-arrow-up-12');
});
.children() should actually work ..
It is difficult to say without knowing the HTML... If you are trying to get to the nested elements
You can use .find()
$(this).find('.i') OR find('#i')
What is i here .. is it class element or ID ..

how to clear or Empty list box using jquery on dropdown event change

Can any body help me out how to clear the items in the list box on dropdown event change.
$(function () {
$("#ddlLevelColumn").change(function () {
$("#lstCodelist") ------ I need to clear this listbox1
$("#lbxSelectedItems")--------------- need to clear list box 2
});
});
<%:Html.ListBox("lstCodelist", Model.CodeListDefaultValue, new { style = "width:99%;height:297px;" })%>
<%:Html.ListBox("lbxSelectedItems", Model.AffectedCodeListboxData, new { style = "width:99%;height:297px;color:blue;" })%>
Thanks for your help..
empty()
$("#lstCodelist").empty()
$("#lbxSelectedItems").empty()
You can remove all entries (or apply filters as well):
$('#listBoxId > option').remove(); // all options
$('#listBoxId > option[val!=""]').remove(); // keep non-empty values
That what you're going for? I believe even simpler:
$('#listBoxId').empty();
Should work as well.
Working Demo: http://jsfiddle.net/jEWe6/
I think .empty() is what you're looking for.
Remove all child nodes of the set of matched elements from the DOM.
http://api.jquery.com/empty/
You can clear select html elements with something like this:
var clear = function() {
$("#lstCodelist").empty().append('<option value="whatever">Wait for reload</option>');
$("#lbxSelectedItems").empty().append('<option value="whatever">Wait for reload</option>');
});
Try this....
$('#listBoxId').empty();
you can also try any of this two approach.
$('#RolesListAvailable').html('');
OR
$('#RolesListAssigned').empty();

Categories

Resources