Develop Reference

How to remove a href that is listed under div tag?

I'm modifying a part of my wordpress theme and I have come across an issue. I want to remove the ability to click on a link though I do not have the ability to modify the class names or set ID tags
HTML:
<div class="one">
foobar.com
</div>
I have tried to remove the functionality by writing this JavaScript:
document.getElementsByClassName("one")
.getElementsByTagName("a")
.removeAttribute("href");
However this method does not work, am I doing something wrong?

You can use css.
.one a {
pointer-events: none;
}
and you can also remove the hand cursor by adding cursor: default;

document.getElementsByTagName("a")[0].removeAttribute("href");
<div class="one">
foobar.com
</div>
No need to target .one first. Just target by getElementsByTagName but remember that this returns an array of elements, so you need to reference the index of the element you want to remove.
document.getElementsByTagName("a")[0].removeAttribute("href");

If you need to select only the links in the "one" class, you'll need to index into what you get back from getElementsByClass then call children and index into that:
document.getElementsByClassName("one")[0].children[0].removeAttribute("href")

You can do it this way:
document.getElementById("text").onclick = function(){
var clickStatus = true; // Change this to true if you want to enable the link.
if (clickStatus){
window.location = "http://foobar.com";
}
}
<div class="one">
<section id="text">foobar.com</section>
</div>

It will generate Type Error because getElementsByClassName function will return a node list not a single node so you will need to do the following:
document.getElementsByClassName("one")[0]
.getElementsByTagName("a")[0]
.removeAttribute("href");
or
document.querySelector(".one a").removeAttribute("href");
Any method of the above will solve your problem
I hope it helps

I think you need to disable the Href functionalities here.
Please use Jquery :
$('.one > a').on('click',function(e){
e.preventDefault();
}
Hope this will work for you

How to select a parent element without any class or id using jquery?

I have the following code:
<div>
<label for="fsc_name1">Name:<span class="required"> *</span></label>
</div>
<div>
<input style="text-align:left; margin:0;" type="text" id="fsc_name1" name="fsc_name" value="" size="60">
</div>
It's a piece of a contact form and I need to be able to hide some of it's elements if a specific element is selected. So lets say I want to hide the two divs above. There's no id or class and I can't give them any. All I have is unique values "for="fsc_name1"" (<label>) and "id="fsc_name1"" (<input>)

Easy! Just use jQuery parent(). See docs: http://api.jquery.com/parent/
$('#fsc_name1').parent().hide()
$('label[for="fsc_name1"]').parent().hide()
You can also combine your selectors to save space. See docs: http://api.jquery.com/multiple-selector/
$('#fsc_name1, label[for="fsc_name1"]').parent().hide()

You can use a mix of atttribute selector, id selector and .parent() to solve this problem
$('label[for="fsc_name1"]').parent().hide()
$('#fsc_name1').parent().hide()

For a start, id="fsc_name1" is a class selector, you can do it via
$('#fsc_name1').parent().hide();
But, I think for your scenario, you're wanting something like this...
// This can be an array of elements
var selector = 'fsc_name1';
$('label[for=' + selector + ']').parent().hide();
$('#' + selector).parent().hide();

No jQuery version:
document.querySelector('[for=fsc_name1]').parentNode.style.display = 'none';
document.querySelector('#fsc_name1').parentNode.style.display = 'none';

Please have a look on http://jsfiddle.net/2dJAN/31/
$('#fsc_name1').closest('div').css('border','1px solid red')
$('#fsc_name1').closest('div').prev('div').css('border','1px solid green')
Note: Exactly I am not able to understand your question. So I add the border to the div's in example. If you want to hide, instead off .css you add .hide()that will hide the div.
Let me know if you have any questions.

Use the .parent() method.
$('#fsc_name1').parent().hide();
$('label[for="fsc_name1"]').parent().hide();

Find element above another using jQuery

I'm trying to find the element using jQuery from the following html.
<ul class="gdl-toggle-box">
<li class="">
<h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
<div class="toggle-box-content" style="">
</div>
</li>
</ul>
What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck.
EDIT
The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.
var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
if( jQuery('.item').hasClass('active') ){
jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
}else{
jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
}
});

You can use closest.
closest will match the first parent element that matches the selector traversing up the DOM tree.
Demo
$('h2.toggle-box-title').click(function(){
$(this).closest('li').addClass('active');
});

Try this.
$('h2.toggle-box-title').click(function(){
$(this).parent().addClass('newclass');
});

try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});

On you click in the button you can use the event:
$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object
http://api.jquery.com/find/

Selecting an element's parent
In order to select an element parent, you can use the parent() function.
Try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
*to be more specific, you target the parent you would like to choose by specifying its selector
Check the jQuery API Documentation here
parent() - Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.

Remove attribute of HTML tag

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

jQuery selector by classname minus classname

I have the following jquery line in a click event of a p element:
$(this).nextUntil('.Maintheme not:.Document')
I would like to get all the next elements with class .Maintheme but not .Document.
To explain myself a little better, this is the html that i have:
<div id="DocumentContents">
<p class="Maintheme">ParentTheme1</p>
<p class="Document">Document1</p>
<p class="Maintheme">ParentTheme2</p>
<p class="Subtheme">SubTheme1</p>
<p class="Document">Document1</p>
<p class="Document">Document2</p>
<p class="Document">Document3</p>
<p class="Subtheme">SubTheme2</p>
<p class="Document">Document1</p>
</div>
Having this html content i would like that when you click in a p element if there is not subthemes then show documents. Else if there are subthemes with documents below, just show the subthemes, and if you click in a subtheme show the next documents.

Something like this?
Example: http://jsfiddle.net/ZSCs3/
$('p:not(.Maintheme)').hide();
$('.Maintheme').click(function() {
var $this = $(this)
if ($this.next('.Subtheme').length) {
$this.nextUntil('.Maintheme').filter('.Subtheme').toggle();
} else {
$this.nextUntil('.Subtheme,.Maintheme').toggle();
}
});
$('.Subtheme').click(function() {
$(this).nextUntil('.Subtheme,.Maintheme').toggle();
});

You should use .nextAll().
var $themes = $(this).nextAll('.Maintheme');
You have to do some if-statements from there to create the logic you want.
if($themes.length){
}
else{
}
Anyways, this looks odd to me. You should use a nested list for instance to display such kind of structures.
Ref.: .nextAll()

You don't have the not syntax quite correct but it's not clear to me exactly what you are asking for so I won't try and correct it for you, just point you at the reference. I agree that this looks a bit off anyway.

I think that the not() jQuery selector is more suitable for your case since the nextUntil() selector will stop gathering the elements with the Maintheme class on the first occurence of p tag styled with Document class. Hence you can use code slice like this:
$(this).not(':.Maintheme').css(hidePtagsWithDocumentclass);