Question 36153 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search