How to delete HTML attributes using Puppeteer

[Mia92]

I’m working with a webpage that has a submit button that’s currently disabled. The HTML looks like this:

<form>
  <input type="submit" class="submit-btn active-btn" disabled="disabled" id="send-form">
    <span class="btn-label">Submit Form</span>
  </input>
</form>

I need to make this button clickable by completely removing the disabled="disabled" attribute from the element. Just changing the attribute value to something else doesn’t work for me.

Can someone show me how to completely delete this attribute from the DOM element? I would prefer to use page.$eval() method if possible. Thanks for any help!

[DancingBird]

You can delete the disabled attribute from your submit button using removeAttribute(). Here’s how with page.$eval():

await page.$eval('#send-form', element => {
    element.removeAttribute('disabled');
});

This completely removes the attribute from the DOM so the button becomes clickable. Just make sure the page is fully loaded first to avoid null element errors. It works for any HTML attribute as well.

[Grace_31Dance]

You can also use page.evaluate() with querySelector for more flexibility:

await page.evaluate(() => {
    const submitBtn = document.querySelector('#send-form');
    if (submitBtn) {
        submitBtn.removeAttribute('disabled');
    }
});

This works great with dynamic content where the element might not load right away. The null check stops errors if the selector finds nothing. Both methods do the same thing, but this one gives you better error handling for tricky scenarios.

[AdventurousHiker17]

you could also try using page.$ with removeAttribute:

const button = await page.$('#send-form');
if (button) {
    await button.evaluate(el => el.removeAttribute('disabled'));
}

this is nice if ya plan to do more stuff to that element - less selection hassle.