Change outerHTML in javascript

Question

$(editor[i])[0].outerHTML has the meaning:

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

I want data-mce-style="color: red;" disappeared.
I do it like this:

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

But that does not replace it.

Answer 1

.replace creates a new converted string; it does not change the original variable. You simply create a new line and do not save the new line back to outerHTML , for example:

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

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

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

Answer 2

Try:

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

http://api.jquery.com/removeAttr/

Of course, this applies to all elements of your selector. If you just want to apply this to element 0, use:

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

Answer 3

element.setAttribute (attr, null) or element.removeAttribute

There is no need for outerHTML and replace. Note that replacing HTML removes event listeners (except for attribute event handlers).

Answer 4

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

Fiddle

Answer 5

Try using jQuery removeData() :

 $(editor[i]).removeData('mce-style'); 

Answer 6

you need to change / delete a specific attribute, for this you need to use

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

check out the following links for more information: http://api.jquery.com/removeAttr/

if you need to change the value of a specific attribute, follow these steps:

 attr( attributeName , value ); 

for more information about the same check: http://api.jquery.com/attr/