Removing extra <p> tags inside the class if it is more than 1 using JavaScript-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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 >
  <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.