如何刪除<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 - 元素的父。