How to remove <i> tag with javascript

Question

I use this script for my progress bars:

$('.progress-bars li').each(function(i){  
  var percent = $(this).find('.spann').attr('data-width');
  var $endNum = parseInt($(this).find('.spann strong i').text());
  var $that = $(this);

  $(this).find('.spann').animate({
    'width' : percent + '%'
  },1600, function(){
  });

  $(this).find('.spann strong').animate({
    'opacity' : 1
  },1400);  

  $(this).find('.spann strong i').countTo({
    from: 0,
    to: $endNum,
    speed: 1200,
    refreshInterval: 30,
    onComplete: function(){}
  });  

  if(percent == '100'){
    $that.find('.spann strong').addClass('full');
  }     
});   

I use <i></i> tags to find the numbers for countTo functions. My problems is I want to delete these <i> tags after running countTo script.

Example:

<ul class="progress-bar"> 
    <li>
         <p>Video production</p>
         <div class="bar-wrap"><div class="spann" data-width="100"><strong><i>100</i>% </strong><div class="arrow"></div></div> </div>
    </li> 
    <li>
            <p>IOS Development</p>
            <div class="bar-wrap"><div class="spann" data-width="80"><strong><i>80</i>% </strong><div class="arrow"></div></div> </div>
    </li>
</ul>

After I run the script I want to remove <i></i> tags and keep the number.

Answer 1

  var Is = document.querySelector(".progress-bar").querySelectorAll("i"); Array.prototype.map.call(Is, function(element){ var content = element.childNodes[0]; element.parentNode.replaceChild(content, element); }); 

 <ul class="progress-bar"> <li> <p>Video production</p> <div class="bar-wrap"><div class="spann" data-width="100"><strong><i>100</i>% </strong><div class="arrow"></div></div> </div> </li> <li> <p>IOS Development</p> <div class="bar-wrap"><div class="spann" data-width="80"><strong><i>80</i>% </strong><div class="arrow"></div></div> </div> </li> </ul> 

This will search all i -elements within the progress bar, iterates over them and removes them, while appending the content to the i -element's parent.

Answer 2

You can use this single line of code after calling your countTo script:

$( "i" ).contents().unwrap();

This selects all the <i> tags. The .contents() gets the text inside <i> , and the .unwrap() deletes the content's parent which is the <i> tag.