javascript - 如何解析 HTML 字符串并删除具有特定类的 div？

Question

我有一个服务返回一个 HTML 片段，其中有一个带有“customerID”类的 div，在我将此代码附加到 DOM 之前，我需要检查模型中是否有 customerID，如果没有，我需要找到剪断中的 div 并将其删除。

这是如何实现的？

Answer 1

尝试使用：

• dojo/dom-construct
• dojo/query
• dojo/NodeList-dom（加载它启用该orphan()方法）

换句话说，可能是这样的：

var tempNode = domConstruct.toDom("<div>Hello world.</div>"); // Make a DOM fragment
var custDivList = query("div.customerID", node); // Find the problem divs and return nodeList
var removedNodes = custDivList.orphan(); // Remove each node in the list from its place
var scrubbedHtmlString = tempNode.innerHTML; // Get the final result

Answer 2

就像其他答案所表明的那样，最好解析您拥有的代码段并使用 dom 操作方法来删除您需要的内容。这类似于@Darien 的答案，但我的包含所需的依赖项并且是一个工作示例。

require([
    'dojo/dom-construct',
    'dojo/query',
    'dojo/NodeList-dom', // provides query(...).orphan()
    'dojo/domReady!'
], function(dom_construct, query) {

    // get your html snippet; hardcoded here for convenience and example
    var html_snippet = [
        '<div>',
            '<div class="customerID">customerID</div>',
            '<div class="content">other content</div>',
        '</div>'
    ].join(''),
        has_customerid = false;

    var node = dom_construct.toDom(html_snippet);

    if (!has_customerid) {
        query('.customerID', node).orphan();
    }

    document.body.appendChild(node);
});

这会解析您的代码段，检查是否customerID存在，如果不存在则删除指定的节点。

这是一个小提琴，因此您可以在节点上玩耍has_customerid并做任何其他需要的事情。您可能想要验证query(...); 我省略了任何错误检查。

Answer 3

如果你有 JQuery，你可以这样做：

var html = $(htmlSnippet);
if(!modelHasCustomerID){
    $(".customerID", html).remove();   
}
container.append(html);

我对 dojo 不是很熟悉，但相信这可以通过 dojo.create、dojo.destroy 和 dojo.query 以类似的方式完成。