removing html element styles via javascript

I'm trying to replace an element's inline style tag value. The current element looks like this:

`<tr class="row-even" style="background: red none repeat scroll 0% 0%; position: relative; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" id="0000ph2009-06-10s1s02">`

and I'd like to remove all that style stuff so that it's styled by it's class rather than it's inline style. I've tried delete element.style; and element.style = null; and element.style = ""; to no avail. My current code breaks at these statement. The whole function looks like:
function unSetHighlight(index){

if(index < 10)
index = "000" + (index);
else if (index < 100)
  index = "000" + (index);
  else if(index < 1000)
    index = "0" + (index);
    if(index >= 1000)
      index = index;
    
var mainElm = document.getElementById('active_playlist');
var elmIndex = "";

for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
  if(currElm.nodeType === 1){

  var elementId = currElm.getAttribute("id");

  if(elementId.match(/\b\d{4}/)){
    
    elmIndex = elementId.substr(0,4);
    
            
    if(elmIndex == index){
      var that = currElm;
      //that.style.background = position: relative;
      }
    }
  }
}
       
clearInterval(highlight);
alert("cleared Interval");
that.style.background = null;

alert("unSet highlight called");
}

the clearInterval works but the alert never fires and the background stays the same. Anyone see any problems? Thanks in advance...

---

function unSetHighlight(index){  
  alert(index);  
  if(index < 10)  
	index = "000" + (index);  
	else if (index < 100)  
	  index = "000" + (index);  
	  else if(index < 1000)  
		index = "0" + (index);  
		if(index >= 1000)  
		  index = index;  
		
	var mainElm = document.getElementById('active_playlist');
	var elmIndex = "";
  
	for(var currElm = mainElm.firstChild; currElm !== null; currElm = currElm.nextSibling){
	  if(currElm.nodeType === 1){

	  var elementId = currElm.getAttribute("id");

	  if(elementId.match(/\b\d{4}/)){
		
		elmIndex = elementId.substr(0,4);
		alert("elmIndex = " + elmIndex + "index = " + index);
		
				
		if(elmIndex === index){
		  var that = currElm;
		  alert("match found");
		  }
		}
	  }
	}
		
	clearInterval(highlight);
	alert("cleared Interval");
	that.removeAttribute("style");
	
	//that.style.position = "relative";
	//reColor();
	alert("unSet highlight called");
}

you can just do:

element.removeAttribute("style")

In JavaScript:

document.getElementById("id").style.display = null;

In jQuery:

$("#id").css('display',null);

getElementById("id").removeAttribute("style");

if you are using jQuery then

$("#id").removeClass("classname");

The class attribute can contain multiple styles, so you could specify it as

<tr class="row-even highlight">

and do string manipulation to remove 'highlight' from element.className

element.className=element.className.replace('hightlight','');

---

Using jQuery would make this simpler as you have the methods

$("#id").addClass("highlight");
$("#id").removeClass("hightlight");

that would enable you to toggle highlighting easily

Use

particular_node.classList.remove("<name-of-class>")

For native javascript

Remove removeProperty

var el=document.getElementById("id");


el.style.removeProperty('display')

console.log("display removed"+el.style["display"])

console.log("color "+el.style["color"])

<div id="id" style="display:block;color:red">s</div>

In jQuery, you can use

$(".className").attr("style","");

Completly removing style, not only set to NULL

document.getElementById("id").removeAttribute("style")