Question

如何使用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>

Answer 1

尝试使用ES6 模板文字：

var element = document.body; // if it's not the entire body :
// var element = document.querySelector('div.className');
var new_html = `<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>`;
element.innerHTML = new_html;

Answer 2

您可以使用以下脚本使用jQuery删除所有输入元素。

$(function() { $('input').each(function() { $(this).remove(); }); });

以下代码将满足您的预期结果。

$(function() { $('span').each(function() { $(this).contents().filter(function(){ return !$(this).is('br'); }).remove(); }); });

Answer 3

document.querySelectorAll('span input').forEach(function(inp) {
    inp.remove();
});
document.querySelectorAll('span *,span').forEach(function(el) {
    [].forEach.call(el.childNodes, function(child) {
        if (child.nodeName == '#text') {
            child.remove();
        }
    });
});

对于IE11，也许可以追溯到IE9 - 这段代码更加普遍兼容

[].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);
        }
    });
});

Answer 4

测试和工作不需要JQuery：

-(NSString*)getStringWithBlankParaFrom:(NSString*)oldStr{

    NSArray*strArray1=[oldStr componentsSeparatedByString:@"("];
    NSString*str2=[strArray1 objectAtIndex:1];
    NSArray*strArray2 =[str2 componentsSeparatedByString:@")"];
    NSString*strToReplace=[strArray2 objectAtIndex:0];

    return [oldStr stringByReplacingOccurrencesOfString:strToReplace withString:@""];
}

Answer 5

首先，你不应该将所有这些放在一个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>

我也不建议将CSS内联。使用内部或外部样式表。您可以在互联网上轻松查看...我会告诉您使用内部样式表有多简单。

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

现在，对于JavaScript部分，您可以使用querySelectorAll函数获取具有匹配标记的所有元素，然后删除它们。因此，如果您将HTML改编为我给你的更多语义版本，那么这应该可以解决问题：

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 );
});

或者您也可以在每个span +输入周围放置一个div标签，给该div一个类，并在javascript中执行querySelectorAll（“。checkbox-container”）并删除它们。

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

5 个答案: