Remove style attribute and span tag from html editor using javascript

Shabbir Daruwala 176 Reputation points
2021-10-25T10:48:22.057+00:00

Hi All,

How to remove only style attribute and span tag from below html using javascript.

Much appreciated

<p><span style="color:#333333;font-family:next-web-font;font-size:13px;background-color:#f9f9f9;">Estee Lauder’s #1 serum to fight the look of multiple signs of ageing.</span></p><p><span style="color:#333333;font-family:next-web-font;font-size:13px;background-color:#f9f9f9;">Ideal For: </span></p><ul><li><span style="color:#333333;font-family:next-web-font;font-size:13px;background-color:#f9f9f9;">Multiple signs of ageing</span></li><li><span style="color:#333333;font-family:next-web-font;font-size:13px;background-color:#f9f9f9;">Visible age prevention </span></li><li><span style="color:#333333;font-family:next-web-font;font-size:13px;background-color:#f9f9f9;">Radiance and Even Tone </span></li></ul><p><span style="color:#333333;font-family:next-web-font;font-size:13px;background-color:#f9f9f9;"></span><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">Experience the next generation—the most comprehensive Advanced Night Repair serum ever. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">Patented until 2033. The UK’s #1 Serum* Source: The NPD Group Ltd., Value Sales of Prestige Women’s Face Serums by Franchise Line, August 2020 – May 2021 1 </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">Now with Chronolux™ Power Signal Technology, this fast-absorbing serum reduces the appearance of multiple signs of aging caused by the environmental assaults of modern life. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">Skin looks smoother and less lined, younger, more radiant and even toned. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;"><strong>RADIANT</strong> </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">• Skin looks radiant and plumped with hydration—all the way through till morning. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">• NEW 72-hour hydration. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">• SAME beloved oil-free texture. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;"><strong>FIRMER</strong> </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">• NEW Now, skin feels firmer, with a new bounce and vitality.</span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;"><strong>YOUTHFUL</strong> </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">• NEW Pores look diminished </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">• Skin looks more youthful as lines and wrinkles appear reduced </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">• 90% of women said their skin felt smoother immediately.</span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;"> OUR #1 FOR EVERYONE Effective for all skintones.</span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">* This is the high performance serum beautiful skin can’t live without.</span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;"><strong>EVERY NIGHT. EVERY MORNING.</strong> Did you know skin has a 24-hour rhythm of natural nighttime renewal and daytime protection? However, every day and night, the stressors of modern life—such as pollution, dryness, lack of sleep from blue light at night—can prematurely age skin’s appearance. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">To renew skin’s look of radiance and vitality, use Advanced Night Repair morning and night. It hydrates and helps promote skin’s natural rhythm of beautiful renewal. Wake up every day to your most beautiful skin. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">*Consumer testing on 543 women. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;"><strong>How to Use it:</strong> Apply this face serum on clean skin before your moisturiser, AM and PM. Use one dropper. Smooth in gently all over face and throat. </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">Try Our Heart Ritual: Apply a full dropper of Advanced Night Repair to the palm of your hand. Massage onto face in a heart shape: Using all fingers of both hands, start at the center of your face and move out to ears. Glide hands from sides of face down under chin. Next, trace a larger heart from middle forehead out to temples. Glide down the sides of the face and close the heart again under your chin. Finish the Heart Ritual by gently massaging onto neck in a downward motion </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;"><strong>Formula Facts:</strong> • Oil-free • New glass bottle...and it’s recyclable • Dermatologist-tested • Ophthalmologist-tested • Non-acnegenic; won't clog pores • Free of synthetic fragrance Ideal For: • Multiple signs of ageing • Visible age prevention • Loss of firmness, tone • Lines and wrinkles • Dryness, dehydration • Dullness, loss of radiance • Uneven skintone </span></p><p><span style="background-color:#f9f9f9;color:#333333;font-family:next-web-font;font-size:13px;">For reasons of hygiene this product cannot be returned if unwrapped, unsealed or used, unless faulty.</span><span style="color:#333333;font-family:next-web-font;font-size:13px;background-color:#f9f9f9;"></span></p>

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,494 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Lan Huang-MSFT 29,516 Reputation points Microsoft Vendor
    2021-10-26T10:23:55.79+00:00

    Hi @Shabbir Daruwala ,
    The style attribute is contained in the span tag, so just delete the <span>,
    You can use the Node.removeChild() method to remove the child nodes of the span from the DOM and return the removed node.
    I suggest you post the code according to the format in the future, which can better help you solve the problem.
    143739-2.png
    Partial screenshot results:
    143738-1.png
    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.