I want to remove a canonical tag from my website. It can't be removed directly from the website since the pages are created on the fly and there are hundreds of them.
I want to remove them via tag manager but don't know what JS code to write.
Can anyone help?
/*
Here you should select elements you need to remove.
With the querySelectorAll, you will select the elements you want to remove.
Assume that we want to remove li elements with .red class in this example.
liList is a nodeList. So you can use foreach for iterating.
*/
let liList = document.querySelectorAll('.red');
liList.forEach((currentLi) => {
currentLi.remove(); //Removing all selected li elements
});
<html>
<body>
<ul>
<li class="red">List1</li>
<p>Text1</p>
<li class="red">List2</li>
<p>Text2</p>
<li class="red">List3</li>
<p>Text3</p>
<li class="red">List4</li>
<p>Text4</p>
<li class="red">List5</li>
</ul>
</body>
</html>
What you need to do is to select the tags you want to remove with DOM operators. I leave a simple example here. All you have to do is make a querySelectorAll operation that suits your needs.
Related
Each of my divs have a class attributes named remove, the first class has the id: remove_item then the second remove_item_1, the third remove_item_2, etc.
My problem is that i only want to clone first one with the id remove_item and remove all the other one from the clone.
If i do clone.find('.remove'); i am able to gather all the elements with remove class but from there i am kinda lost on how to do that.
Could anyone help ?
Thanks.
You can keep first div by adding :first.
clone.find('.remove:first');
I think I got what you mean
here's an example how to pick the first element of a cloned div:
lets say you have
<ul id="list">
<div id="clone">
<li class="remove remove1">Remove 1 </li>
<li class="remove remove2">Remove 2</li>
<li class="remove remove3">Remove 3</li>
</div>
</ul>
The script to clone the list and remove the first child of the clone goes like this :
<script>
let clone = $('#clone').clone().appendTo('#list');
clone.children().first().remove();
</script>
or you can select the first one by class selection as #Manashree Shah mentioned like this:
clone.find('.remove:first');
The code uses jQuery, you can add this before the script if you haven't already added it :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
I am using Selenium Webdriver for my project. I have a webpage where there are multiple menu items which in turn has sub menu items. I want to replace the classname attribute for all child elements under the nav-left-main div tag with "" (space) so that all elements are visible in the main page to click (instead of navigating to each menu->sub menu)
Basically i want to find all elements with classname under id=main and replace them with ''. How do i do that with JavaScriptExecutor in selenium webdriver?
<div id="nav-left-main">
<div>
<a class="left-nav-icons icomoon-icon-users3 " title="Users" href="#Users-tab">
<div id="Users-sub" class="nav-left-subnav">
<div id="Users-tab" class="hidden-menu">
<ul class="level3menu">
<li>
<i class="cm-icon18 iconfont-arrow-sans-right" style="margin-top:-2px;margin-left:-17px;"></i>
<a>Users</a>
<ul class="second-level-hidden-menu" style="margin-left:5px;margin- top:10px;">
<ul class="second-level-hidden-menu" style="margin-left:5px;margin-top:10px;">
<ul class="second-level-hidden-menu" style="margin-left:5px;margin-top:10px;">
</li>
</ul>
<ul>
<li>
<a id="AdminGroups" class="$item.className" title="" href="cms?action=groupList&pageTitle=Groups">Groups</a>
</li>
</ul>
<ul>
</div>
</div>
</div>
This might work for you:
var main_div = document.getElementById("nav-left-main");
var all_childs = main_div.getElementsByTagName("*"); // get all child elements
for (var i=0; i<all_childs.length; i++)
{
if ( all_childs[i].hasAttribute("class") ) all_childs[i].className = ""; // or all_childs[i].removeAttribute("class")
}
I'm assuming you're trying to write some automated tests. Consider this: if you modify the UI content, you just might affect the behavior of something else on the page (e.g. some JS assuming those class-attribute values might stop functioning).
Alternatively, inject CSS (via STYLE or LINK) that changes the appearance and visibility of those elements (hint: !important). However, even this, theoretically, is not ideal solution, because like-JS (for example) might go bananas for the same reason.
I'm not experienced in testing webpages, but isn't the point of Selenium to automate behavior of a human user? In other words, maybe the best would be to write test-code to activate the menu the same way human-user would (mouseover, etc).
I'm trying to make a sidebar menu for a dashboard. I want to implement this with .closest as it will fit with my code right. Here is a simple example of what I'm trying to do: https://jsfiddle.net/eu8kjzh4/10/
Why isn't the closest span's (and the only span in this case) text being replaced with a '-'? In my code, I have
$('.' + Key).closest( '.' + Key ).css("color", "#000");
This code works just fine, but the one in the jsfiddle does not.
closest traverses up the DOM and is used for nested elements.
In your markup, your div is not a descendant of your span, not even a sibling.
You have
1. To retrieve the previous sibling (the first li after the body)
2. And find the span inside the li
$(document).ready(function() {
$(".sub").prev().find('span').text('-');
});
Also, in your fiddle, you forgot to include jQuery.
Here is a working code : https://jsfiddle.net/qwc6pepr/1/
Incorrect function: .closest( selector ) Returns: jQuery
Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
What you want is the prev which finds the first sibling prior to the element
$(document).ready(function() {
$('.sub').prev('li').find('span').text('-');
});
From jQuery documentation
Given a jQuery object that represents a set of DOM elements, the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements
Your span is neither a Parent Element of your div.sub in the DOM, nor matches with the $(".sub") rule.
The only way to make your jQuery code work with your HTML structure :
$("#plusMinus1").text("-");
Or modify your HTML structure to match with the .closest() method requierements
Fiddle
When you go to the parent you'll end up in the body. From there you can find the span.
$(document).ready(function() {
$(".sub").parent().find("span").text("-");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<li>
<a class="selected" href="#" onclick="return false;">Dashboard 1 <span id="plusMinus1">+</span></a>
</li>
<div class="sub">
<ul>
<li><a id="s1" href="">Test A</a>
</li>
<li><a id="s2" href="">Test B</a>
</li>
<li><a id="s3" href="">Test C</a>
</li>
</ul>
</div>
</body>
Firstly, I am familiar with .wrapAll() and that is not what I need. I have some markup that I am not able to change and I need to wrap everything in a <li>.
Here is what I am trying to do:
$('nav[role="breadcrumb"] ul a').wrap('<li></li>');
$('nav[role="breadcrumb"] ul li:last').after('<li>');
$('nav[role="breadcrumb"] ul').append('</li>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav role="breadcrumb">
<ul class="clearfix">
Home
Health Care Professionals Healthy Choices Cholesterol Kits
</ul>
</nav>
The problem is that jQuery closes each of these <li> tags. Here is the original markup:
<nav role="breadcrumb">
<ul class="clearfix">
Home
Health Care Professionals Healthy Choices Cholesterol Kits
</ul>
</nav>
As you can see, I have some loose text at the bottom of this <ul> and I am trying to get it wrapped in an <li>.
.contents() will get all the children, including the text nodes
$('nav[role="breadcrumb"] ul').contents().filter(function() {
return $.trim($(this).text())!=="";
}).wrap('<li/>');
EDIT: Added the filter method to get rid of the whitespace text nodes
Try creating your <li> first and then append your selector to it:
var $li = $('<li>').append('nav[role="breadcrumb"] ul a');
Then use $li to replace or append anywhere you like.
jQuery only works with complete elements, you can't append just a closing or opening tag.
If the ul doesn't have any other list items, you could simply use wrapInner
$('nav[role="breadcrumb"] ul').wrapInner("<li />");
If it does contain LI's, the easiest way would be to detach them, wrap inner, then append them.
var $lis = $('nav[role="breadcrumb"] ul > li').detach();
$('nav[role="breadcrumb"] ul').wrapInner("<li />").prepend($lis);
First I realize ID's should be unique. But right now I can't do much about that. I have a javascript plug-in that is generating ID names and for one page it works great. The issue is in creating another page, it will start over using the same naming convention. For example:
Page 1
<ul id="1">
Page 2
<ul id="1">
So if I am trying to style ul#1 on Page 1 it will also style ul#1 on Page 2. So, any suggestions on how to separate our the two id's? This html is generated by the JS, otherwise I would just attach a class to it.
Thanks.
First, the unique ID suggestion is restricted to a page. It is perfectly fine to have multiple ID's on different pages. The best way to overcome this is to add a ID to the body.
Page1
<body id="Page1">
<ul id="1">
<li></li>
</ul>
</body>
Page2
<body id="Page2">
<ul id="1">
<li></li>
</ul>
</body>
CSS
#Page1 #1
{
//Some style for page 1, ID 1
}
#Page2 #1
{
//Some style for page 2, ID 1
}
Can you attach a class around it ? Have a div or span some other element surround your code that does the generation and assign a class to it.
I'd say you have to use different style sheets on each page if you need different styles for the same ids, but this will be a pain to maintain as you make styling changes.
Alternatively you could you assign a class to one of the page's UL tags and then create a style for that class.
First of all, the plugin is still not generating the correct ids because ids can't be numbers. To answer your question, try to figure out some parent element that might be different between the two pages probably in which case you can use CSS such as this:
#parent ul#1{
/* styles here */
}
#parent2 ul#1{
/* styles here */
}
page1:
<div id="parent">
<ul id="1">
............
page2:
<div id="parent2">
<ul id="1">
............
So you need to find out a some parent element of ul which is not common between the two pages. This is the only possibility that comes to my mind where you have no control over changing the ids or replacing them with classes since they are being generated by the plugin.
You need something to distinguish them if you want them styled separately. If you cannot modify those tag you could probably use some parent container like:
<div id="parent1">
<ul id="id1" />
</div>
<div id="parent2">
<ul id="id1" />
</div>
and then:
#parent1 ul {
...
}
#parent2 ul {
...
}
Also notice that an id cannot start with a number as in your case. You should probably consider switching/modifying this plugin.
One thing I commonly do is attach a class to the body for each page. <body class="home_section"> and then you could style based on that class .home_section ul#1 {}.
Also, IDs must begin with a letter.