[ANSWERED] html – Removing extra
tags inside the class if it is more than 1 using JavaScript

Question 1

Using document.querySelectorAll('.classname > p') it will return all p elements,then from second element remove it

let peles = document.querySelectorAll('.classname > p')
for(let i=1;i<peles.length;i++){
   peles[i].remove()
}

<div class='classname'>
    <p>Lorem ip purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
</div>

Update

If there are more divs,then you can using following

let divs = document.querySelectorAll('.classname')
for(div of divs){
  let ps = div.querySelectorAll('p')
  for(let i=1;i<ps.length;i++){
    ps[i].remove()
  }
}

<div class='classname'>
    <p>Lorem ip purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
</div>

<div class='classname'>
    <p>Lorem ip purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
</div>

Question 2

If you need to enforce this every time, you might not even need to check how many <p> elements are inside the classname, and just remove all but the first child.

const elements = document.querySelectorAll('.classname > p:nth-of-type(n+2)');
elements.forEach(e => e.remove());

<div class="classname">
  <p>1. Lorem ip purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>
  <p>2. Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
  <p>3. Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
  <p>4. Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
</div>

This code takes advantage of the CSS selector :nth-of-type which will select all p elements (In case you want to have other type of tags in there)
And also the functional notation n+2 which offsets our selection to spare the first child.

Question 3

Hello Experts is there any way to remove existing p tags inside the class? if it is more than 1 using JavaScript.

Example:

 <div class='classname'>
    <p>Lorem ip purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
     <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
      <p>Lorem ipsum m ip purus hendrerit quam. Mauris convallis dolor v </p>
    </div>`

Expected Result:

<div class='classname'>
         <p>Lorem ip purus hendrerit quam. Mauris convallis dolor vel ex placerat, non imperdiet dolor lacinia. </p>

Bollate

[ANSWERED] html – Removing extra
tags inside the class if it is more than 1 using JavaScript

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by lucumt

By

Related Post

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate