jQuery: use .remove() instead of Regex inside object

Question

I have a TD that always contains a div and some text outside the div.

The div has four nested divs that always follow the below structure. The only thing I am interested in is the text in this TD that appears outside the main div, everything else should be removed.

The text I want to keep varies, the structure of the rest is fixed.

Example TD:

<td>
    <div id="show_status_1622327228" class="nor_addr_status" onmouseout="show_status_div(2, this);" onmouseover="show_status_div(1, this);" style="display: none;">
        <div id="status_safe_1622327228" class="status_hov" onmouseout="javascript:chgcolor(2, this);" onmouseover="javascript:chgcolor(1, this);">
            Text1
        </div>
        <div id="status_unknown_1622327228" class="status_hov" onmouseout="javascript:chgcolor(2, this);" onmouseover="javascript:chgcolor(1, this);">
            Text2
        </div>
        <div id="status_pr_1622327228" class="status_hov" onmouseout="javascript:chgcolor(2, this);" onmouseover="javascript:chgcolor(1, this);" style="background-color: rgb(255, 255, 255);">
            Text3
        </div>
        <div id="status_fraud_1622327228" class="status_hov" onmouseout="javascript:chgcolor(2, this);" onmouseover="javascript:chgcolor(1, this);" style="background-color: rgb(255, 255, 255);">
            Text4
        </div>
    </div>
    The only text I want to keep
</td>

I tried the following which works fine. My only concern is the multiple replaces / Regexes and I am wondering if I could use .remove() instead in order to reduce loading times.

If this is possible, can someone here tell me how I have to adjust it ? Note: The first line of the below needs to remain unchanged, this is only about the replace / Regex part below.

util.setProp(obj, "address", $(msg).find("#tab_address_info")
    .find("td:contains('(Home)')").prev().text()
    .replace(/<div[\s\S]+?<\/div>/g, '')
    .replace(/\s+/g, ' '));

Many thanks for any help with this, Tim.

Answer 1

As @Milind Anantwar said you can use .remove(). If you want to get the value of the text outside the divs to set somewhere else but not actually remove the divs from the page then you will need to .clone()before you .remove()

I think maybe you want something like

var td = $('td.cleantd').clone(); //Using comment above - otherwise find the right td yourself
$('div', td).remove();
util.setProp(obj, "address", td.text());

Working fiddle

Answer 2

try this:

 $('td div').remove();

Working Demo

Update: by targetting DIV

 $('.status_hov').closest('td').find('div').remove();