Remove attribute of HTML tag - javascript

Is it possible to remove the attribute of the first HTML <div> tag? So, this:
<div style="display: none; ">aaa</div>
becomes
<div>aaa</div>
from the following:
<div style="display: none; ">aaa</div>
(bbb)
<span style="display: none; ">ccc</span>​

Or pure JavaScript:
document.getElementById('id?').removeAttribute('attribute?')

To remvove it from literally the first element use .removeAttr():
$(":first").removeAttr("style");
or in this case .show() will show the element by removing the display property:
$(":first").show();
Though you probably want to narrow it down to inside something else, for example:
$("#container :first").removeAttr("style");
If you want to show the first hidden one, use :hidden as your selector:
$(":hidden:first").show();

Yes, in fact jQuery has something for this purpose: http://api.jquery.com/removeAttr/

You can use the removeAttr method like this:
$('div[style]').removeAttr('style');
Since you have not specified any id or class for the div, the above code finds a div having inline style in it and then it removes that style from it.
If you know there is some parent element of the div with an id, you can use this code instead:
$('#parent_id div[style]').removeAttr('style');
Where parent_id is supposed to be the id of parent element containing the div under question.

You say "remove the attribute" — do you mean to remove all attributes? Or remove the style attribute specifically?
Let's start with the latter:
$('div').removeAttr('style');
The removeAttr function simply removes the attribute entirely.

it is easy in jQuery just use
$("div:first").removeAttr("style");
in javascript
use var divs = document.getElementsByTagName("div");
divs[0].removeAttribute("style");

Related

jQuery .append() multiple #id's with one line?

I'm using the jQuery .append() function to input content into HTML elements via their id like so;
function returnGameDetailed(data) {
$('#game-synopsis').append(data.results.deck);
}
For some of the data.results I need to append them to multiple elements, is there a correct method to do this?
In the documentation I can only see a method for multiple inputs to the same element, not reversed.
Here's what i've attempted;
$('#game-title').$('#purchase-amazon').append(data.results.name);
and
$('#game-title', '#purchase-amazon').append(data.results.name);
You were almost right. The correct way is here:
$('#game-title, #purchase-amazon').append(data.results.name);
However, I'd recommend you to use classes instead:
$('.elements-to-insert').append(data.results.name);
<div class="elements-to-insert" id="game-title"></div>
<div class="elements-to-insert" id="purchase-amazon"></div>
Give both elements a class and then append to that class
$('.className').append(data.results.name);
The elements having the className will get appended with the html

Function for adding and removing style on click and unfocus

I am trying to implement a function which changes style of element on click and remove it when unfocus. For ex: When element2 is clicked, it should remove class of other elements, and add class to the clicked element only.
<div class="dope" id="element777"></div>
<div class="dope" id="element2"></div>
<div class="dope" id="element11"></div>
<div class="dope" id="element245"></div>
<div class="dope" id="element60"></div>
.....(More are created automatically, numbers are not estimatable)
I couldnt know the element ids that are created. The only remains same is class.
I have tried this, but its an unprofessional approach.
$('#element1').click(function(){
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element1").blur(function(){
$("#element1").removeClass(dope);
});
$('#element2').click(function(){
$("#element2").addClass(dope2);
$("#element1").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element2").blur(function(){
$("#element2").removeClass(dope);
});
What is the best approach for automating this function, instead of adding click and blur (unfocus) function to ALL of elements ?
You can listen for click events on any div with an id containing the word "element', then target its siblings elements (those that are not clicked, without referring to them by id). This might do it:
$("div[id*='element']").click(function(){
$(this).addClass('dope').siblings('.dope').removeClass('dope');
});
Your jQuery could be vastly simpler if you leverage this and siblings:
Instead of:
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
It could be:
$('.dope').click(
function() {
$(this).addClass(dope2).siblings().removeClass(dope);
}
);
NOTE:
Do you have a variable called dope with the class name, or is dope the class name? If it's the classname, you need to put it in quotes: $(this).addClass('dope2'), etc.
If you are removing the class dope, then will want to add a class you can always use to select these elements (so that when you remove dope, it continues to work).
Button part:
$("div").click(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).addClass("dope2");
$(".dope").not($(this)).removeClass("dope");
}
})
Blur part:
$("div").blur(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).removeClass("dope");
}
}
I would recommend using the :focus css selector rather than using javascript to do what you are doing... Read more here. Instead of having a click listener, the focus selector will take care of that for you and automatically remove the styling when the element is out of focus.

How to select an element by ID using jQuery

I am trying to use the following jQuery code to add a div with class col_box inside the col_left div:
$('#col_left').add('div').addClass('col_box');
My DOM tree looks like this:
<div id="header">Header</div>
<div class="col_container">
<div id="col_left">
<div class="col_box">A</div>
<div class="col_box">B</div>
</div>
</div>
However the jQuery code isn't working. It adds the class col_box to every element on the page.
$('#col_left').add('div') is adding all <div> elements to the original selection. Try using $('#col_left').append('<div class="col_box"></div>') instead (or .prepend).
$('#col_left').add('div') means the same as $('#col_left, div'). i.e. "The element with the id 'col_left' and all div elements.
If you want to select the divs that are children of col_left, just use a child combinator.
$('#col_left > div').addClass('col_box')
.add() adds a selector to the selection, it doesn't create or add elements.
$('#col_left') means *select element id col_left*
.add('div') means add all divs of the page the the selection
So at this point you've selected #col_left and all the divs.
.addClass('col_box') means *add the class col_box to all elements of the selection*.
Here is how to create a div and add it to #col_left:
$('<div></div>').addClass('col_box').appendTo('#col_left');
Or:
$('<div class="col_box"></div>').appendTo('#col_left');
you can use
.append appends after the matched target
$('#col_left').append(
$("<div/>",{class:'col_box'}).html("div added")
);
here is the fiddle http://jsfiddle.net/R65cn/4/

Jquery find all except

I have following HTML:
<div id="123" class="test">
<div class="testMessage">Foo</div>
<div><div class="testDate">2010</div></div>
<div id="127" class="test">
<div class="testMessage">Bar</div>
<div><div class="testDate">2011</div></div>
</div>
</div>
And I have following JS/jQuery code:
$(".test").find(".testDate").val("cool 2010");
How to change JS/jQuery to find "testDate" class element except in children "test" class block without using children?
P.S. I know only about class name and I don't know how many divs can be nested.
Update
Its probably the weirdest selector I've ever written:
$("div.test").not(':has(> .test)').siblings().find('.testDate').text('cool 2010');
Demo: http://jsfiddle.net/mrchief/6cbdu/3/
Explanation:
$("div.test") // finds both the test divs
.not(':has(> .test)') // finds the inner test div
.siblings() // get all other divs except the inner test div
Try this and also div elements do not have a value property, use html() method to set the inner html or text()
$("div.test :not(.test)").find(".testDate").html("cool 2010");
If you can modify your main div id to "_123", you can straight away use the id selector like this
$("#_123 > div.testDate").html("cool 2010");
I think the not() selector might help. You can learn more about it here: http://jsperf.com/jquery-css3-not-vs-not
Anytime you try to select $('.test'), it will grab all elements with a class='test'. You need to start at the outermost body tag:
$('body').children('.test').children(':not(.test)').find('.testDate').text('cool 2010');

Create a div containing target div using jQuery

I think that this should be easy, but I'm not able to get it working. I want to target a div or other element using jQuery and then dynamically create a div containing the targeted element, for example:
jQuery ('.myclass')
How can I create a div with the background-color attribute set to white that contains 'myclass' element?
Initially I have: <div class="myclass">Some HTML elements inside</div>
And after executing the jQuery call i want to have: <div style="background-color:#fff"><div class="myclass">Some HTML elements inside</div></div>
I hope that you understand my question...
You can use the wrap function to put a wrapper around the matching elements. I'd prefer to use a class for the background, but you can assign CSS properties directly as well.
$('.myclass').wrap( $('<div></div>').css( 'background-color', '#fff' ) );
or
$('.myclass').wrap( $('<div></div>').addClass('white-background') );
var $myDiv = $('<div>').css('background-color','#fff').append( $('.myclass') );
You can then write this variable to the DOM as you see fit, or do whatever else you need to do.

Categories

Resources