How to remove all tags between two tags using Javascript (not Jquery)?

Question 1

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?

Question 2

You can iterate through the nextElementSiblings 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();
}

Question 3

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;
}

Question 4

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" />

Leave a Comment Cancel reply