如何使用 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');
  }     
});

我使用  标签来查找 countTo 函数的编号。我的问题是我想在运行ning countTo 脚本之后删除这些  标签。

示例：

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

在我运行脚本之后，我想删除  标签并保留数字。

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>

这将搜索进度条内的所有 i-元素，遍历它们并删除它们，同时将内容附加到 i-元素的父元素。

Answer 2

您可以在调用 countTo 脚本后使用这一行代码：

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

这将选择所有  标签。 .contents() 获取  中的文本，.unwrap() 删除内容的父级，即  标签。

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

How to remove <i> tag with javascript

javascript

tags