jQuery remove text from the containers?

Question

I have my markup like this

<div class="content-wrapper">    
<div class="wrapper">
        <section>
            <div class="counter">
                <div class="counter-data-values">$2,809,121</div>03
                    <span class="counter-body"></span>
            </div>
            </div>
        </section>
    </div>

        <div class="wrapper">
            <section>
                <div class="counter">
                    <div class="counter-data-values">678</div>02
                        <span class="counter-body"></span>
                </div>
                </div>
            </section>
        </div>

        <div class="wrapper">
            <section>
                <div class="counter">
                    <div class="counter-data-values">976</div>12
                        <span class="counter-body"></span>
                </div>
                </div>
            </section>
        </div>
</div>

Now from this you can see there are texts like 03, 02, 12. I want to remove them at a time. So for that I used the jQuery code like this

jQuery(document).ready(function() {
  jQuery('.counter').first().contents().eq(1);
});

But it is only selecting the first text of first block only i.e 03. So can someone tell me how to select and remove 03,02,12 at a time? Any help and suggestions will be really appreciable. Thanks

see http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — yesterdaysfoe, Jul 30 '15 at 04:11
`$(".counter").contents().filter(function(){return this.nodeType === 3;}).remove();` — yesterdaysfoe, Jul 30 '15 at 04:15

score 0 · Answer 1 · answered Jul 30 '15 at 03:40

You are trying to remove the next sibling of counter-data-values which is a text node

jQuery(document).ready(function() {
  jQuery('.counter .counter-data-values').map(function() {
    return this.nextSibling;
    //return this.nextSibling.nodeType == Node.TEXT_NODE ? this.nextSibling : undefined;//if you want to make sure it is a text node
  }).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-wrapper">
  <div class="wrapper">
    <section>
      <div class="counter">
        <div class="counter-data-values">$2,809,121</div>03
        <span class="counter-body"></span>
      </div>
  </div>
  </section>
</div>

<div class="wrapper">
  <section>
    <div class="counter">
      <div class="counter-data-values">678</div>02
      <span class="counter-body"></span>
    </div>
</div>
</section>
</div>

<div class="wrapper">
  <section>
    <div class="counter">
      <div class="counter-data-values">976</div>12
      <span class="counter-body"></span>
    </div>
</div>
</section>
</div>
</div>

jQuery remove text from the containers?

1 Answers1