CODEWITHSUNDEEP
javascriptjqueryhtml
BigMac
BigMac

Reputation: 39

Remove child elements, but keep contents using jQuery/javascript

So I have some HTML that looks like this:

    <div class="spinning-items">
         <div>
              <ul>
                  <li>
                      Hello, How Are You?
                  </li>
              </ul>
         </div>
    </div>

I need to remove all the elements inside the "spinning-items" - div, but keep it's contents. In this case "Hello, How Are you?". So, I want it to look like this afterwards:

    <div class="spinning-items">
          Hello, How Are You?
    </div>

Can anyone please point me in the right direction, or perhaps help me with a working solution?

Thank you in advance.

Upvotes: 1

Views: 167

Answers (3)

brk
brk

Reputation: 50291

With native javascript you can do this using regex and trim() to remove white space

let k = document.getElementsByClassName('spinning-items')[0].innerHTML;
var rex = /(<([^>]+)>)/ig;
document.getElementsByClassName('spinning-items')[0].innerHTML = k.replace(rex, "").trim();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinning-items">
  <div>
    <ul>
      <li>
        Hello, How Are You?
      </li>
    </ul>
  </div>
</div>

Upvotes: 1

Mukesh Burnwal Mike
Mukesh Burnwal Mike

Reputation: 499

$(".spinning-items"")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();    //get the text of element

this will give you only text

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

Try following

$(".spinning-items").html($(".spinning-items").text().trim())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinning-items">
  <div>
    <ul>
      <li>
        Hello, How Are You?
      </li>
    </ul>
  </div>
</div>

In case there are more than 1 element with class spinning-items

$(".spinning-items").each((i,e) => $(e).html($(e).text().trim()))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinning-items">
  <div>
    <ul>
      <li>
        Hello, How Are You?
      </li>
    </ul>
  </div>
</div>
<div class="spinning-items">
  <div>
    <ul>
      <li>
        Hello, How Are You Doing?
      </li>
    </ul>
  </div>
</div>

Upvotes: 6

Related Questions