如何删除<i>标签使用javascript

Question

我使用这个剧本，我的进度条：

$('.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></i>标签找到号码countTo功能。我的问题是我想在运行countTo脚本后删除这些<i>标签。

例子：

<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> 

后，我跑我想删除<i></i>标签和保持数量的脚本。

Answer 1

您可以致电您countTo脚本后，使用这一行代码：

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

这将选择所有<i>标签。该.contents()得到内部<i>文字和.unwrap()删除该内容的父这是<i>标签。

Answer 2

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>

这将搜索所有i -elements进度条中，对他们进行迭代，并删除它们，而追加内容到i - 元素的父。