This is how certain external css files are placed between two meta tags.
<meta id="front-template-css-anchor-start" name="front-template-css-anchor-start" content="This is where front template css will be added"/>
<link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/LineIcons.2.0.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/animate.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/tiny-slider.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/glightbox.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/main.css" />
<meta id="front-template-css-anchor-end" name="front-template-css-anchor-end" content="This is where front template css will be added"/>
In my js code, I tried to get the two meta tags like this:-
var frontTemplateCssAnchorStart = document.querySelector('#front-template-css-anchor-start');
var frontTemplateCssAnchorEnd = document.querySelector('#front-template-css-anchor-end');
This code,
frontTemplateCssAnchorEnd.previousElementSibling.remove();
removes <link rel="stylesheet" href="%PUBLIC_URL%/front-template/assets/css/main.css" />
from the DOM. But I want to iterate from frontTemplateCssAnchorStart
to frontTemplateCssAnchorEnd
and delete/remove all <link>
tags. But I am stuck and don’t know how to proceed from here.
How can I solve this?
You can iterate through the nextElementSibling
s until the end element is reached.
for (let curr = frontTemplateCssAnchorStart.nextElementSibling, next;
curr && curr != frontTemplateCssAnchorEnd; curr = next) {
next = curr.nextElementSibling;
if (curr.matches('link')) curr.remove();
}
You can use a nextElementSibling
property and iterate through the siblings. Something like:
let currentEl = frontTemplateCssAnchorStart.nextElementSibling;
while (currentEl && currentEl !== frontTemplateCssAnchorEnd) {
let nextEl = currentEl.nextElementSibling;
if (currentEl.tagName.toLowerCase() === 'link') {
currentEl.remove();
}
currentEl = nextEl;
}
A nice simple one liner
document.querySelectorAll('#front-template-css-anchor-start ~ link:not(#front-template-css-anchor-end ~ link)').forEach(link => link.remove());
Demo with spans
document.querySelectorAll('#front-template-css-anchor-start ~ span:not(#front-template-css-anchor-end ~ span)').forEach(link => link.remove());
<span>1</span>
<meta id="front-template-css-anchor-start" name="front-template-css-anchor-start" content="This is where front template css will be added"/>
<span>2</span>
<span>3</span>
<meta id="front-template-css-anchor-end" name="front-template-css-anchor-end" content="This is where front template css will be added"/>
<span>4</span>
<link rel="stylesheet" href="https://stackoverflow.com/questions/77830227/%PUBLIC_URL%/front-template/assets/css/main.css" />