Without using jquery, how to I turn off any future links? as my ajax result returned html which contain tags.
In the AJAX callback function, you can run this code which will remove the href attribute from the links:
var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
links[i].removeAttribute("href");
}
Demo: http://jsfiddle.net/Lzjkf2uv/1/
you can use providing ID for ajax loaded content
getElementsByTagName
WORKING CODE :
<html>
<head>
<script>
window.onload=function(){/*
//removes attribute
suggested by : Duncan Cowan
var anchors = document.getElementById("myAjaxResult");
anchors = anchors.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
anchors[i].removeAttribute("href");
}*/
//NOTE: Prevents default actions (has default anchor's css)
var anchors = document.getElementById("myAjaxResult").getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
anchors[i].addEventListener("click",
function(event){
event.preventDefault();
}
);
}
}
</script>
</head>
<body>
<div id="myAjaxResult">
Test 2
Test 2
<a></a>
<a></a>
</div>
</body>
</html>
Note:
call the anchor remove function on ajax SUCCESS
Are you considering using CSS for that?
If yes, here it is:
.disabled {
pointer-events: none;
}
Related
I want to style differently links that are have the anchor same as the href attribute value:
https://google.com
Is it possible to do this with CSS alone, or do I need JavaScript for this?
Thanks for your comments on this being impossible in CSS.
I ended up with this JavaScript solution:
document.addEventListener("DOMContentLoaded", () => {
for (item of document.querySelectorAll("a[href*='//']")) {
if (item.getAttribute('href') == item.innerHTML) {
//item is an HTML link with anchor same as innerHTML.
//in this case, I just add a class to it
item.classList.add('no-after-content')
}
}
})
A simple solution with javascript . Hope this helps.
https://google.com/<br />
https://yahoo.com/
<script>
var myCol = document.getElementsByTagName("a");
for(i=0; i< myCol.length; i++){
if((myCol[i].href).trim() == (myCol[i].innerHTML).trim()){
myCol[i].style.color = "red";
}
}
</script>
I was wondering if there is a possibility to HIDE anchor tags that refer to a particular URL.
I know there is possible to hide based on id like this with JavaScript:
document.getElementById('someID').style.display = 'none';
Check
But let's say I want to hide all anchor tags based on URL example: www.example.com
Check
Check
I want to hide the first anchor tag, not the second that refers to example2.com
Is this possible with pure JavaScript and not jQuery?
You can use document.querySelector to select bu attribute value like this.I have used no jquery the only javascript is used.
document.querySelector("[href='www.example.com']").style.display = 'none';
Check
Check
Simply loop through all anchor elements and then check their href:
var anchors = document.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) {
if (anchors[i].href == 'https://example.com/') {
anchors[i].style.display = 'none';
}
}
Check
Check
You can use javascript to do the job. Use querySelector to get all the elements with same id. Then loop the ids and compare the href link value.
<script>
var elements = document.querySelectorAll("[id='someID']");
for(var i = 0; i < elements.length; i++) {
if (elements[i].getAttribute("href") === "www.example.com") {
elements[i].style.display='none';
}
}
</script>
Working fiddle link
You can make condition
var url = document.getElementsByTagName('a');
if (url.href = "www.example.com")
{
url.style.display = none;
}
It is not exact code. i provided you example .kindly try it and let me know. It is for single . if you have many tags then loop all those
I'm trying to write a simple script which will change the text of a number of anchors on a page. I'm quite new to Javascript and I'm able to change the anchors but it changes the whole tag including removing the href.
How do I edit just the text only without affecting the href?
<body>
<div class="loop-add-to-cart">
Add to basket
<div class="wpd-buttons-wrap-simple" data-id="11544">
Design from blank
</div>
</div>
<script>
function buybuttons() {
var buybuttons = document.getElementsByClassName('wpd-buttons-wrap-simple');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].innerHTML="Test";
};
}
buybuttons();
</script>
</body>
You can use a query selector to get all a tags inside an element with a class of wpd-buttons-wrap-simple:
document.querySelectorAll('.wpd-buttons-wrap-simple a');
You can then set the textContent or innerHTML of the link.
<body>
<div class="loop-add-to-cart">
Add to basket
<div class="wpd-buttons-wrap-simple" data-id="11544">
Design from blank
</div>
</div>
<script>
function buybuttons() {
var buybuttons = document.querySelectorAll('.wpd-buttons-wrap-simple a');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].textContent = "Test";
};
}
buybuttons();
</script>
</body>
Using 'querySelectorAll' you can get the element the class and the element inside as below:
document.querySelectorAll('.wpd-buttons-wrap-simple > a')
function buybuttons() {
var buybuttons = document.querySelectorAll('.wpd-buttons-wrap-simple a');
for(var i = 0; i < buybuttons.length; i++){
buybuttons[i].innerHTML="Test";
};
}
buybuttons();
You are currently overwriting the innerHTML of the div element, but you are looking for the anchor element inside of the div.
Use document.querySelectorAll to get all of them, or document.querySelector to only get the first.
Sorry but I'm having trouble getting this logic to work, I want to select all <a> tags on the page and then log out when one of these tags are hovered over, can anyone explain where I'm going wrong?
JS
var links = document.getElementsByTagName('a');
links.onmouseover = function() {
console.log('hovered');
};
Fiddle http://jsfiddle.net/AK8N8/
//Switching to jQuery I can do this fine but would like to know the JS version
var links = $('a');
links.on('mouseover', function() {
console.log('hovered');
});
You have to add event to each element NOT to COLLECTION in pure JS. jQuery do this in the hood. So:
for(var i=0; i<links.length; i++) {
// ... links[i].addEventListener()
}
That's because document.getElementsByTagName returns a NodeList. You have to loop over the items and attach the onmouseover function individually:
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onmouseover = function() {
console.log('hovered');
};
}
I want to hide the <h1> element using plain javascript, not jQuery, without adding id="whatever" or class="whatever" to the tag. Is this possible?
Why can't I just add id="whatever" to the tag?
I'm using a UIButton in xCode that when clicked, it injects javascript into a UIWebView. Inside that UIWebView is a H1 element that is on a website that I do not have access to to add <h1 id="whatever">. I hope it makes sense.
document.getElementsByTagName('h1')[0].style.display = 'none';
You can use getElementsByTagName method:
var h = context.getElementsByTagName('h1');
for (var i = h.length; i--; ) {
h[i].style.display = 'none';
}
Where context is document or more specific parent node you want to search your headers within.
However there is better solution. You could add specific class to some parent node and hide child headers with CSS:
.without-headers h1 {display: none;}
Use getElementsByTagName to hide the first h1 on your page:
document.getElementsByTagName("h1")[0].style.display = "none";
// ^ index 0, so that's the first `h` that's found.
Or to hide them all:
var headers = document.getElementsByTagName("h1");
for (var i = 0, l = headers.length; i < l; i++; ) {
headers[i].style.display = "none";
}
Or even better yet, if you can modify the CSS:
h1{
display:none;
}
For the JavaScript solutions, please keep in mind that they will only work when the DOM has been loaded.
Add a domready event listener, like this:
window.addEvent('domready', function() {
// modify your DOM here.
});
you can use getElementsByTagName
document.getElementsByTagName("h1")
But it will access all h1 elements, so to be more specific access it by index like this
document.getElementsByTagName("h1")[0].style.display = "none";
just small change in dfsq's code
var h = document.getElementsByTagName('h1');
for (var i =0; i<h.length; i++) {
document.getElementsByTagName('h1').item(i).style.display = 'none';
}