I'm using jQuery Mobile which creates a lot of the DOM for you. I need to remove() radio buttons, but based on how the HTML is constructed in jQuery Mobile, I do not have an id for the parent div. I can easily grab both the input and labels, but need to also get rid of the our div to completely removed the entry styling from the list of radio buttons.
<div class="ui-radio">
<input type="radio" value="ahBkMj" id="ahBkMj" name="spam" data-theme="c">
<label for="ahBkMj" class="ui-btn ui-btn-icon-left ui-btn-up-c">
<span class="ui-btn-inner">
<span class="ui-btn-text">Foo</span>
<span class="ui-icon ui-icon-ui-icon-radio-off ui-icon-radio-off"></span>
</span>
</label>
</div>
Will jQuery's .parent() do ?
Since the <div> element is the immediate parent of your <input> element, you can use the aptly-named parent() method:
$("#ahBkMj").parent().remove();
In the general case, if you want the first ancestor matching a selector, you can use closest():
$("#ahBkMj").closest("div").remove();
Note, however, that closest() includes the element itself in its search.
this works for me.....
var child = '# or . and name of your child div... ';
var width = Math.round($(child).parent().width());
Related
I have a div class which is essentially a button that I'm trying to click using jQuery
<div class="tool-button refresh-button icon-tool-button" title="Refresh"><div class="button-outer"><span class="button-inner"><i class="fa fa-refresh text-blue"></i> </span></div></div>
Here is what I tried but the log confirms the length is 0 thus not selected, any suggestions?:
console.log($('.div.tool-button .refresh-button icon-tool-button:first'))
console.log($('.div.tool-button .refresh-button icon-tool-button'))
You had multiple problems with the selector.
Remove . before div since its a tag not a class.
Remove the spaces between the classes, when there is space between them jquery is looking for element thats a child to the previous selector.
console.log($('div.tool-button.refresh-button.icon-tool-button:first').length);
console.log($('div.tool-button.refresh-button.icon-tool-button').length);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tool-button refresh-button icon-tool-button" title="Refresh">
</div>
In your solutions, you trying to get:
<div class="tool-button">
<div class="refresh-button">
<div class="icon-tool-button"> // this
</div>
</div>
</div>
If you delete spaces on string, you can access your element.
The solution is
$(".tool-button.refresh-button.icon-tool-button")
Chaining selectors will query for elements that contain all of the selectors.
Detailed answer: https://stackoverflow.com/a/59406548/11969749
You can use click() method
const btn = $(".tool-button.refresh-button.icon-tool-button");
btn.click();
Do you want to select first element?
const btn = $(".tool-button.refresh-button.icon-tool-button")[0];
btn.click();
Objective
Highlight (by adding a background-color to) the "row" <li> if a (nested) checkbox inside that row is clicked.
Background
In this feature I am working on the interface for a file management system. When a user clicks the checkbox they can then delete all the files checked. to give them visual feedback, i want all of their selected files to have a background color. This will be done by clicking a checkbox, then i want the <li> to be colored.
Current state
I found various helpful answers on stackoverflow but have a gap in knowledge and trying to fill that in. Most answers use the parent element. But that only helps me by coloring that specific parent that holds the checkbox.
Code
I have this demo on codepen
jQuery
$("#this-list :checkbox").on('click', function(){
$(this).parent().toggleClass("checked");
});
CSS
.checked {
background: red;
}
HTML
<div class="container">
<ul id="this-list">
<li>
<div class="row">
<div class="col-md-2">
<input type="checkbox" />
song.mp3
</div>
<div class="col-md-2">
2011
</div>
<div class="col-md-2">
1 gb
</div>
<div class="col-md-2">
2 min
</div>
</div>
</li>
<!-- More <li>s -->
</ul>
</div>
you could use closest to get the closest checkboxs li element:
$("#this-list :checkbox").on('click', function(){
$(this).closest('li').toggleClass("checked");
});
this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector (li in this case).
Use .parents([selector])
For the li you want this
$(this).parents('li').toggleClass("checked");
Or if you only want the row highlighted
$(this).parents('.row').toggleClass("checked");
Or if you only want the cell highlighted
$(this).parents('.col-md-2').toggleClass("checked");
You are very close! You can use the .parents() method of jQuery and pass in the class .row. It would look like this:
$("#this-list :checkbox").on('click', function(){
$(this).parents(".row").toggleClass("checked");
});
EDIT:
As #showdev mentioned, if you want the li element, you can just do:
$(this).parents("li").toggleClass("checked");
Simply add another .parent() to add the checked class to the row (the parent of the parent):
$(this).parent().parent().toggleClass("checked");
See this CodePen fork.
As in this Codepen
$("#this-list :checkbox").on('click', function(){
$(this).closest("li").toggleClass("checked");
});
Alternatively, since the checkbox is contained inside a div which is inside the target li you can use: Codepen
$("#this-list :checkbox").on('click', function(){
$(this).parent().parent().toggleClass("checked");
});
I have a <div> that has many other <div>s within it, each at a different nesting level. Rather than give every child <div> an identifier, I rather just give the root <div> the identifier. Here’s an example:
<div class="a" id="a5">
<div class="b">
<div class="c">
<a class="d">
</a>
</div>
</div>
</div>
If I write a function in jQuery to respond to class d and I want to find the ID for its parent, class a, how would I do this?
I cannot simply do $('.a').attr('id');, because there are multiple class as. I could find its parent’s parent’s parent’s ID but that seems of poor design, slow, and not very polymorphic (I would have to write different code for finding the ID for class c).
Assuming that this is .d, you can write
$(this).closest('.a');
The closest method returns the innermost parent of your element that matches the selector.
Pass a selector to the jQuery parents function:
d.parents('.a').attr('id')
EDIT Hmm, actually Slaks's answer is superior if you only want the closest ancestor that matches your selector.
You can use parents() to get all parents with the given selector.
Description: Get the ancestors of each
element in the current set of matched
elements, optionally filtered by a
selector.
But parent() will get just the first parent of the element.
Description: Get the parent of each
element in the current set of matched
elements, optionally filtered by a
selector.
jQuery parent() vs. parents()
And there is .parentsUntil() which I think will be the best.
Description: Get the ancestors of each
element in the current set of matched
elements, up to but not including the
element matched by the selector.
Extracted from #Resord's comments above. This one worked for me and more closely inclined with the question.
$(this).parent().closest('.a');
Thanks
<div id="412412412" class="input-group date">
<div class="input-group-prepend">
<button class="btn btn-danger" type="button">Button Click</button>
<input type="text" class="form-control" value="">
</div>
</div>
In my situation, i use this code:
$(this).parent().closest('.date').attr('id')
Hope this help someone.
Use .parentsUntil()
$(".d").parentsUntil(".a");
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.
I need to show/hide multiple elements with the same name when another element is clicked, like
<span name="showhide" value="one" id="button">Click to Hide One</span>
<span name="showhide" value="two" id="button">Click to Hide Two</span>
<span name="showhide" value="shoe" id="button">Click to Hide shoe</span>
would hide the elements with the corresponding value when clicked
<span name="showhide" value="one">One</span>
<span name="showhide" value="two">Two</span>
<span name="showhide" value="shoe">shoe</span>
Also, onclick='' can't be used in the HTML, it has to go in the script. Can't apply any attributes to a tags other than href too (this is for a MediaWiki)
I've tried a bunch of different methods but I can't seem to get it to work, does anybody have any suggestions?
The markup's not valid: there's no such attribute as <span name> or <span value>, and you can't have multiple elements with the same id. All this is likely to confuse any attempts you make to fetch the elements by name or id. Use a class instead, and since what you've got is links to other parts of the page it would seem sensible to mark them up as internal links. You can always style them not to look like links using CSS.
<a class="showhide" href="#one">Click to hide one</a>
<a class="showhide" href="#two">Click to hide two</a>
<div id="one">One</div>
<div id="two">Two</div>
<script type="text/javascript">
for (var i= document.links.length; i-->0;) {
var link= document.links[i];
if (link.className=='showhide') {
var div= document.getElementById(link.hash.substring(1));
Toggler(link, div, true);
}
}
function Toggler(toggler, togglee, state) {
toggler.onclick= function() {
state= !state;
togglee.style.display= state? 'block' : 'none';
return false;
}
}
</script>
On page load, first add an event to all the elements with that name to toggle hide/show. When an element is clicked, loop through all the elements and change their style to display:none or display:block depending on the current state. To identify the current state you can either find the display attribute value or add/delete a class.