This question already has answers here:
How do I disable a href link in JavaScript?
(20 answers)
Closed 5 months ago.
I need a script that will disable all links inside the "parent" .my-class using Vanilla JS (without jQuery):
<div class="my-class">
<div class="class-1">
<div class="class-2">
<div class="class-3">
<a href="#">
<div class="class-4"></div>
</a>
<a href="#">
<div class="class-4"></div>
</a>
<a href="#">
<div class="class-4"></div>
</a>
</div>
</div>
</div>
</div>
UPD: I need links that can't be clicked on. It doesn't matter if the "href" entry remains or not.
You can check the answers on this entry, I think they will help: How do I disable a href link in JavaScript?
But, basically, you have two options:
Avoid the "href" attribute from having a value
1.1. Remove the attribute alltogether:
parentElement.querySelectorAll('a').forEach(link => link.removeAttribute("href"));
1.2. Set the value to "javascript:void(0)":
parentElement.querySelectorAll('a').forEach(link => link.setAttribute("href", "javascript:void(0)"));
Prevent click events from being fired:
parentElement.querySelectorAll('a').forEach(link => link.style.pointerEvents = "none")
you can remove the href attribute or its value
links = document.querySelectorAll('.my-class a');
Array.from(links).forEach(element => {
element.setAttribute('href', '#');
});
Related
This question already has answers here:
JavaScript and getElementById for multiple elements with the same ID
(13 answers)
Closed 1 year ago.
full code is here : https://github.com/M-lakshan/toggle-menu-test.git
//common toggle part in the HTML(only the first div tag class "Qi" may differ...
//there are 5 of them(as Qi,Qii,Qiii,Qiv,Qv)
<main>
<!--***-->
<div class="Qi">
<div class="tab">
<a id="anchor" class="active">
How many team members can I invite?
<img id="clickingArrow" class="active" src="./icon-arrow-down.svg" alt="click-arrow">
</a>
<div id="dropdown" class="active">
<p class="text">
You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.
</p>
</div>
</div>
</div>
<hr>
<!--***-->
</main>
//just JS
const arrowS = document.querySelectorAll("#clickingArrow");
arrowS.forEach(function(arrow) {
arrow.addEventListener( "click", function(titlePop) {
setTimeout ( () => {
//for dropdown
let text = document.getElementById("dropdown");
text.classList.toggle("active");
}, 500);
//for anchor
const container = titlePop.currentTarget.parentElement;
container.classList.toggle("active");
//for clickingArrow
this.classList.toggle("active");
});
});
This only works for the first toggle element in the HTML. full code(with HTML & CSS) is available in my provided Github link.
Looking at your GitHub code, and the code in the question, it appears that you are using the same ID for multiple elements on the page. This would explain the issue you are experiencing as IDs should always be unique across a page. I would suggest instead using classes to be added to each id.
For example:
<img class="clickingArrow active" src="./icon-arrow-down.svg" alt="click-arrow">
and the selector const arrowS = document.querySelectorAll(".clickingArrow"); should help in fixing this problem.
If it is imperative that you use IDs, then add a unique identifier to each, for example: <img id="clickingArrow_1" class="active" src="./icon-arrow-down.svg" alt="click-arrow"> and adjust your selctor accordingly.
Let's assume I have html
<div class='test'>
<div class='_test_'>
<a class='test1 href='/page-1'> Press here! </a>
</div>
<a href='/page-2'> Or here </a>
</div>
<div class='test'>
<a href='/page-6'> Another href </a>
</div>
What xpath shall I use for getting only first href value in class='test'?
Wanted result is an array: [/page-1, /page-6]
One possible XPath :
//div[#class='test']/descendant::*[#href][1]/#href
demo
brief explanation :
//div[#class='test']: find div element where class attribute value equals 'test'
/descendant::*[#href][1]: within such div, find any element that contains attribute href, and then restrict the result to only the first of such element
/#href: from previously found element, returns href attribute
This question already has answers here:
How to find the closest event element
(2 answers)
Closed 7 years ago.
I opened post where i asked for assistance with jquery code:
How to find the closest event element
unfortunately, other user didn't read my issue.
I have A link. clicking on it will show/toggle div. my problem is that my div is not always located at the same level from the A link. sometimes the A link is 1 level upon the hide DIV. sometime it's 2 levels or more. sometime it's below it
how can I find the closest DIV, that contain the class ".hidebox", to the A link?
<a href="#" class="hideBox-tab " >show div</a>
$(".hideBox-tab").click(function(){
$(this)
.parent().parent()
.find(".hideBox")
.toggle();
return false;
});
If you and an <a> to show/toggle the div the <a> must be outside the div:
toggle and show div
<div class="hideBox">
Content here
</div>
Then you need to find in your HTML one tag that allways englobes a.hideBox-tab and div.hideBox.
For example: div.partial-content:
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
And your JS will be like this:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
I created a snippet, take a look at it:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
<div class="partial-content">
toggle and show div
<div>
<div class="hideBox">
Content 2 here
</div>
</div>
</div>
This solution works for one or more levels between a.hideBox-tab and div.hideBox.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I have the following setup for a community website:
<div id="posts">
<div class="container">
<div id="placeholder"></div>
<h1>Friend Requests</h1>
</div>
</div>
getRequests.js appends the following into the container div:
<div id="4" class="result">
<a href="user.php?id=4">
<img src="images/user-uploads/profile/?id=4">Random Guy
</a>
<div class="response">
<button data-id="4" class="accept">Accept</button>
<button data-id="4" class="deny">Deny</button>
</div>
</div>
friendResponse.js has the following:
$(function(){
$(".accept").click(function(){
var id = $(this).attr("data-id");
$("#"+id).remove();
});
});
So, you would expect that when I click the accept button, the container with id=1 should get removed, but for some reason, it doesn't.
And also, to add to the peculiarity, the code works if I inject it through the console.
And, for the record, the script is not showing any errors.
Try:
$(function() {
$(document).on("click", ".accept", function() {
var id = $(this).data("id");
$("#"+id).remove();
});
});
Explanation:
You have to set the event for all new incoming node .accept. You have to bound the event on the document. See live event.
Here is the corresponding jsfiddle
This question already has answers here:
How can I apply a jQuery function to all elements with the same ID?
(4 answers)
Closed 9 years ago.
I am using the "replace" function to remove all non-numeric values in a div.
It seems Jquery replace only affects the first element.
Here is my Jquery:
$('#comment').each(function() {
var thz = $(this);
var repl = thz.html(thz.html().replace(/\D+/g, ''));
});
HTML Code:
<a id="comment1" href="#"> c2fđf011. </a>
<a id="comment1" href="#"> c20ff113. </a>
<a id="comment1" href="#"> c201gf76341. </a>
Result:
2011 c20ff113. c201gf76341.
The result I want is:
2011 20113 20176341
You have duplicate ids, Which is invalid and also jQuery ID selector(or any other id selector like document.getElementById which internally jQuery uses because element with ids are indexed by most browsers and are meant to be unique) will return only the first one that appears in DOM. Change it to class and see it working:
$('.comment').each(function() {
var thz = $(this); var repl =
thz.html(thz.html().replace(/\D+/g, ''));
});
HTML
<a class="comment1" href="#"> c2fđf011. </a>
<a class="comment1" href="#">c20ff113. </a>
<a class="comment1" href="#"> c201gf76341. </a>
By the way had your id been like this:-
<a id="comment1" href="#"> c2fđf011. </a>
<a id="comment2" href="#">c20ff113. </a>
<a id="comment3" href="#"> c201gf76341. </a>
Starts with Attribute selector will help you (But slow you down literally, since this is an attribute selector and lose the advantage of using IDs).
$('[id^=comment]').each(function() { // While using this better give a container context $('[id^=comment]', 'container').each(function...
var thz = $(this);
var repl = thz.html(thz.html().replace(/\D+/g, ''));
});
Demo
Moral: IDs must be unique
ID in a HTML page is supposed to be unique
That is the reason it targets only the first instance of the element found.
Replace the elements with class instead
$('.comment').each(function() {
// Your code
});
$('.comment').each(function() { var thz = $(this); var repl = thz.html(thz.html().replace(/\D+/g, '')); });
replace ur element with id comment to a class comment.
If you use ID several times on elements the selector will only pick the first element with that ID.
But when you use class instead, the selector will pick all the element having that class.
If you really don't want to change the html you can use selector by attribute. But as others suggested, using class instead of id is the best option here.
$('div[id="comment"]').each(function(){})