Remove a specific text after div

Im trying to delete the text (Costa Rica, United States) after the #box01 and #box02 divs.

<div id="box01">

  Costa Rica

  &l开发者_开发知识库t;div>100 percent</div>

<div>

<div id="box02">

  United States

  <div>99 ballons</div>

<div>

To produce:

<div id="box01">

  <div>100 percent</div>

<div>

<div id="box02">

  <div>99 ballons</div>

<div>

My problem is that Costa Rica and United States are not inside a <p>.

Thanks in advance.

---

Try this(uses contents, filter & replaceWith):

$(function () {
    $("#box01, #box02").contents().filter(function () {
        return this.nodeType != 1;
    }).replaceWith("");
});

Sample @ jsFiddle: http://www.jsfiddle.net/CwTa8/1/

---

If all you want is the div to be in the child then this would work without using a regex since the content is already there. You could loop over a list of the ids.

$(document).ready(function() {
    $('#box01').replaceWith($('#box01').children());
    $('#box02').replaceWith($('#box02').children());
});

---

I'm not seeing any answer, so I'll give you what I can come up with even if it's not pretty. You can get the div contents with $('div#box01').html(). You can alter that string using something like regex replace() and then call $('div#box01').replaceWith(newContentYouJustMade).

It's not pretty, but it will work.

---

$('#box01, #box02').html( function(i,oldHTML){
  return oldHTML.replace(/^[^<]+/,'');
});

---

Modify Cybernate's solution to make it for all div containing 'box' inside ID

$(function () {
    $("div[id*=box]").contents().filter(function () {
        return this.nodeType != 1;
    }).replaceWith("");
});