通过JavaScript从HTML中删除内部文本和输入元素_Javascript

通过JavaScript从HTML中删除内部文本和输入元素

javascript

通过JavaScript从HTML中删除内部文本和输入元素,javascript,Javascript,如何使用Javascript从html中删除所有输入元素和内部文本这是我的html： <div> Tick Below Movie : <in

如何使用Javascript从html中删除所有输入元素和内部文本

这是我的html：

<div>
  <span style="font-family:arial;font-size:8px">
    <b>Tick Below</b>
  </span>
  <p>
    <span style="font-family:arial;font-size:8px">
      Movie : <input type="checkbox" value="movie"><br/>
      Books : <input type="checkbox" value="movie"><br/>
      Browsing : <input type="checkbox" value="movie"><br/>
    </span>
  </p>
</div>


在下面打勾

电影：

书籍：

浏览：

输出应为：

<div> 
  <span style="font-family:arial;font-size:8px">
    <b></b>
  </span>
  <p>
    <span style="font-family:arial;font-size:8px">
      <br/>
      <br/>
      <br/>
    </span>
  </p>
</div>

尝试使用ES6模板文字：

var元素=document.body；//如果不是整个身体：
//var元素=document.querySelector（'div.className'）；
var new_html=`








`;
element.innerHTML=new_html；

您可能可以通过jQuery使用下面的脚本删除所有输入元素

$（函数（）{
$（'input'）。每个（函数（）{
$（this.remove（）；
});
});
下面的代码将为您提供所需的结果
$（函数（）{
$（'span'）。每个（函数（）{
$（this.contents（）.filter（function（））{
return！$（this）.is（'br'）；
}).remove（）；
});
});
对于IE11，也许可以追溯到IE9——这段代码更为通用
已测试并正在运行无需JQuery：
function removeTxt() {
    var elements = document.querySelectorAll("*");          
    for(var i = 0; i < elements.length; i++) {
        if (elements[i].parentElement && elements[i].tagName=="INPUT"){
            elements[i].parentElement.removeChild(elements[i]);
            i--;
            continue;
        }
        for (j=0;elements[i].childNodes && j<elements[i].childNodes.length;j++){
            child = elements[i].childNodes[j];
            if(child && child.nodeType == 3) {
               elements[i].removeChild(child);
               i--;
            }
        }
    }
}

函数removext（）{
var元素=document.queryselectoral（“*”）；
对于（var i=0；i对于（j=0；elements[i].childNodes&&j首先，您不应该将所有这些都放在一个span标记中，如果您不想使用CSS欺骗以获取自定义复选框，那么您应该这样做：
<div>
    <span style="font-family:arial;font-size:8px">Movie: </span>
    <input type="checkbox" value="movie"><br/>
    <span style="font-family:arial;font-size:8px">Books: </span>
    <input type="checkbox" value="movie"><br/>
    <span style="font-family:arial;font-size:8px">Browsing: </span>
    <input type="checkbox" value="movie"><br/>
</div>

或者，您也可以在每个span+输入周围放置一个div标记，给该div一个类，然后在javascript中执行queryselectoral（“.checkbox container”）并删除它们。基本上您想清除span标记内的所有内容吗？OP没有说他有权访问JQuery；）jQuery是为懒惰的程序员设计的谢谢。您的解决方案在Internet Explorer 11中似乎不起作用。@在IE11上测试的ShrinathShetty似乎没问题。输入控件被删除了，但内部文本没有。谢谢。您的解决方案在IE 11中似乎不起作用。这是因为Internet Explorer不支持element.remove方法-apolyfill是可用的--澄清一下，在IE11中，这个代码会出现什么错误？我看到IE11的另一个问题-让我来解决这个问题
[].forEach.call(document.querySelectorAll('span input'), function(inp) {
    inp.parentNode.removeChild(inp);
});
[].forEach.call(document.querySelectorAll('span *,span'), function(el) {
    [].forEach.call(el.childNodes, function(child) {
        if (child.nodeName == '#text') {
            child.parentNode.removeChild(child);
        }
    });
});

function removeTxt() {
    var elements = document.querySelectorAll("*");          
    for(var i = 0; i < elements.length; i++) {
        if (elements[i].parentElement && elements[i].tagName=="INPUT"){
            elements[i].parentElement.removeChild(elements[i]);
            i--;
            continue;
        }
        for (j=0;elements[i].childNodes && j<elements[i].childNodes.length;j++){
            child = elements[i].childNodes[j];
            if(child && child.nodeType == 3) {
               elements[i].removeChild(child);
               i--;
            }
        }
    }
}

<div>
    <span style="font-family:arial;font-size:8px">Movie: </span>
    <input type="checkbox" value="movie"><br/>
    <span style="font-family:arial;font-size:8px">Books: </span>
    <input type="checkbox" value="movie"><br/>
    <span style="font-family:arial;font-size:8px">Browsing: </span>
    <input type="checkbox" value="movie"><br/>
</div>

<head>
<style>
span {
    font-family:arial;
    font-size:8px
}
</style>
</head>
<body>
<div>
    <span>Movie: </span>
    <input type="checkbox" value="movie"><br/>
    <span>Books: </span>
    <input type="checkbox" value="books"><br/>
    <span>Browsing: </span>
    <input type="checkbox" value="browsing"><br/>
</div>
</body>

var input = document.querySelectorAll("input");
Array.prototype.forEach.call( input, function( node ) {
    node.parentNode.removeChild( node );
});

var input = document.querySelectorAll("span");
Array.prototype.forEach.call( input, function( node ) {
    node.parentNode.removeChild( node );
});