Advanced selector - Hide Parent - javascript

Here is my HTML:
<td>
<a class="button" href="#">
<input id="download">...</input>
</a>
<a class="button" href="#">
<input id="downloadcsv">...</input>
</a>
</td>
Using CSS I want to hide the <a> which contains an input with the ID = downloadcsv
Is there a parent option in CSS?
Edit: As current aswers indicate you cant hide a parent element based on the class of one of its childeren.
Is it possible to do this simply in Javascript, rather than using a framework like jQuery?

Assuming the <a> is the direct parent of the downloadcsv-input, you can just use
document.getElementById("downloadcsv").parentNode.style.display = "none"

This is not possible with CSS (2). However, it is possible with jQuery.

To expand on Fran's answer, the jQuery solution would be this:
$("a:has(#downloadcsv)").hide();
Otherwise, you'll need to put a class on the parent <a> indicating that it is the parent of #downloadscv.

Related

Get an anchor text value among multiple anchor's with same href

My html is
<a id='_requestOne' href='#applynow'> apply one </a>
<a id='_requestTwo' href='#applynow'> apply two </a>
<a href='#applynow'> apply three </a>
I want to change the anchor text for the second one alone. so I implemented in script as
$("a[href='#applynow']").text("request call");
Its changing all the three tags, so I tried as
$("#_requestTwo a[href='#applynow']").text("request call");
But its not working.
Can anyone give me a solution that how could I declare both id & href in same call.
Thanks in advance.
What you can do is target the second Item of the jQuery Object:
$( $("a[href='#applynow']")[1] ).text('request call') //starts counting at 0
I do not advise on this, it makes the code less maintenable if the html markup changes. You have an ID, so use that instead.
$("#_requestTwo").text('request call')
PS:
The reason why your second try doesn't work is because you had an error in the selector:
$("#_requestTwo a[href='#applynow']")
//should be
$("a[href='#applynow']#_requestTwo")
First select anchors with href then specify with ID or select directly by ID because ID should be unique:
$("a[href='#applynow']#_requestTwo").text("request call");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id='_requestOne' href='#applynow'> apply one </a>
<a id='_requestTwo' href='#applynow'> apply two </a>
<a href='#applynow'> apply three </a>
Always select elements from low to high specificity like:
$("tagname.class");

Attempting to toggleClass on div is failing

I'm trying to pull a toggleClass() on a class from an id element, e.g:
$('#create a').click(function(){
$('#create div').toggleClass('active');
});
and it doesn't wanna toggle the class active on the divider.
Here is the button:
<a href="#create" id="create" data-toggle="tab">
<i class="fa fa-plus" aria-hidden="true"></i>
</a>
and here is the class I'm trying to toggle active on:
<div class="" id="create">
<!-- Content Here -->
</div>
You have two issues here. Firstly #create a won't match any elements as the a element has that id, not a child element of it. You could instead use a#create or just #create.
Secondly you've duplicated the create id on both the a and the div, when id attributes must be unique within a page. You need to use another id value to identify the div element.
With those issues in mind, try this:
$('#create').click(function(){
$('#content').toggleClass('active');
});
.active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#create" id="create" data-toggle="tab">
<i class="fa fa-plus" aria-hidden="true">+</i>
</a>
<div class="" id="content">
Content here...
</div>
First, you should not have the same ID for more than one element.
Second, selectors don't work like you think: $('#create a') means "all A elements inside the element with the id = create". Just use $('#create'). You could use $('a#create'), which means "the A element with id = create", but that's unneccessary since id should always be unique.
Make sure you give a unique ids in your DOM.
And then your selectors are wrong.
They should be
$('#create').click(function(){
$('#creatediv').toggleClass('active'); // given new id to div
});
There is no need to mention the div as you have id in hand.

Can I use a <button> instead of <a> to go to #location?

I have this code.
<li class="active">
Weekly Payment
</li>
<li>
Advance Payment
</li>
<li>
Expenses
</li>
My question is that can I use <button> instead of <a> to achieve this? I changed it to buttons but they are not working.
Yes. Use <button type="button" onclick="window.location.href='YOUR URL HERE'">Link Text</button>
You can't use href in button but you can use data-href attribute to do this work. When button clicked get value of data-href and use window.location.hash to going to target id.
$("button").click(function(){
window.location.hash = $(this).data("href");
});
#first, #second, #third {
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-href="#first">First</button>
<button data-href="#second">Second</button>
<button data-href="#third">Third</button>
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
You can try to take a look at this
Or you can create a button with a <a href> inside of it. I dont know wat you are trying to achieve with changing it into a button?
<button type="button">
hello
</button>
if it is for the style you can just apply a style to the a tag like this Go to Google
Goodluck!
Whenever you use #something in an anchor tag's href attribute it actually take you to an element in same page who's id is 'something'. You can use it like this as well:
click
In this case it will take you to the anotherpage.aspx page's element who's id is 'something'.
Now the purpose of button is completely different, but there are some ways to satisfy your requirement but that is not recommended. You should use anchor tag in this situation.
Here is a great link to show the difference between anchor and button tag. Check it.
Thanks.
Button does not have href functionality, so unless you use some JS functions to simulate this - No, you can't
You can use the styles over <a class="your-btn-style"> to show your anchor like a button.
If you are using bootstrap, you can simply add class="btn btn-primary" in your anchor for example :
Advance Payment
I also used this approach in my project :

How to hide any html element by using another class in javascript?

How can I hide an element below hide_below_element selector using Javascript.
<div class"hide_below_element">asdfasdfasd</div>
<div><a> the element for hiding form hide_below_element selector</a> </div>
<div><a>Another information no need to hide </a> </div>
Thanks for your supported us.
I'm not quite sure what you want to accomplish, but what about this :
$('.hide_below_element').next().hide();

Jquery Toggle only works on one Post

I'm having an issue with using Jquery toggle on a feed. I have a hyperlink called Tags. When i click on this it toggles a div underneath it.
It works - But only for the top post in the feed - If I have any other posts in the feed it doesn't work.
Below Is Jquery:-
<script type="text/javascript">
$(function () {
$("#hypfeedTagBtn").click(function() {
$("#divPostBodyTags").toggle();
return false;
});
});
</script>
Below is HTML:-
<div id="divPostFoot_64" class="dPostMain dPostFoot">
<span id="Content_ucFeeds_repFeedThread_lblFeedViewCouont_0" class="spFootReplyCount"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedShareLink_0" class="spFootLinks"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedDeleteLink_0" class="spFootLinks"></span>
<a id="hypfeedTagBtn" class="spFootLinksShowTags">Tags</a>
<a id="Content_ucFeeds_repFeedThread_hypFeedMessageMe_0" class="spFootLinks" href="/Mail/NewMessage.aspx?FeedID=64">Message Me</a>
</div>
<div id="divPostBodyTags" class="dPostMain dPostTAGSDIV" style="display: block;">
<ul id="PostBodyTags">
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
</ul>
</div>
Thanks
Steve
MDN element.id
The ID must be unique in a document, and is often used to retrieve the
element using document.getElementById.
In some documents (in particular, HTML, XUL, and SVG), the id of an
element can be specified as an attribute on the element like so: .
However you can't use this attribute in a custom XML document without
correctly specifying the type of the id attribute in the DOCTYPE.
Other common usages of id include using the element's ID as a selector
when styling the document with CSS.
Note that IDs are case-sensitive, but you should not create IDs that
differ only in the capitalization (see Case Sensitivity in class and
id Names).
Use a class instead of an id if you want to toggle more than one section.

Categories