Change outerHTML in javascript

Question

$(editor[i])[0].outerHTML has a value of:

 <p style="color: red;" data-mce-style="color: red;">some string</p>

I want data-mce-style="color: red;" to disappear.
I'm doing that like this:

$(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');

But it's not replacing it.

Answer 1

.replace creates a new transformed string; it does not alter the original variable. You're simply creating a new string and not storing the new string back into outerHTML, like:

$(editor[i])[0].outerHTML = $(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');

However, this only solves your immediate problem -- there are vastly better ways to accomplish what you need than stringifying and re-parsing your <p> element. Since you're using jQuery, the most obvious way would be to use the removeAttr method:

$(editor[i]).removeAttr('data-mce-style')​;​