Form with jQuery don't working correct - javascript

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.

Related

How to hide elements when another element is clicked

Having a bit of difficulty getting this jquery to work. I have a form where all fields are nested in a div.form-group. The subscribe button has an id of subscribe.
I want the form fields to disappear on click... but my js is not working out. Here's what I've tried, to no avail:
(function($) {
window.onload = function () {
$("#subscribe").click(function() {
$(".form-group").css("display: none");
});
}
})(jQuery);
The form-group class is set to display: block in the CSS.
Is there something obvious I'm missing here? Any help is greatly appreciated.
cheers,
jQuery provides a .hide() method as a shortcut to setting the various CSS directives that hide an element (display: none and visibility: hidden, for example).
$(".form-group").hide();
If you prefer to set the CSS directly, place quotes around both elements of the statement:
$(".form-group").css("display", "none");
$(".form-group").css("display: none");
supposed to be
$(".form-group").css("display", "none");
**OR**
$(".form-group").css({ "display" : "none"});
you have been trying to set the attribute as a single string.
It is supposed to be comma separated if it's only a single attribute that you want to change.
Or an object if you want to target multiple css properties at the same time.
$("#subscribe").click(function() {
$(".form-group").hide()
});
}
$( "#anotherid" ).on('click', function() {
$( "#idhere" ).hide('slow');
});
Try this

remove jquery elements that do not have a class

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();

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.

Not able to retrieve button text JS/Jquery

I want to retrieve the text of a button that is clicked. I've read up on other suggestions for similar questions, but cant seem to get it to work. Here is the fiddle: http://jsfiddle.net/z3PKm/63/
Which currently isn't working. What am I doing wrong, or what should I do which is right?
Thanks!
I've tried to copy the following solution
alert($(this).attr("value"));
But it still doesn't work for me.
Use this:-
.text() will give you the text of the button as per your example. You are using button and not input type="button" If it was input type="button" then .val() would work.
function test(name) {
alert($(name).text());
}
Since you are using jquery you can use the click event
$('button').on('click',function(){
alert($(this).text());
});
The type of button that you are using are not using value, they are text.
Write this:
$(name).text()
This is how I would do it jQuery style.
This also show you how to use inputs and buttons and text() or val() as appropriate
$('.choose').on('click', function(){
var $this = $(this);
alert('text: '+$this.text()+'\nval: '+$this.val());
}); // end on click
You need to use alert($(name).text()); I have updated the jsfiddle with the same:
jsfiddle

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