Как разобрать строку HTML и удалить div с определенным классом?

Question

У меня есть служба, возвращающая мне фрагмент HTML, в котором есть div с классом «customerID», прежде чем я добавлю этот код в DOM, мне нужно проверить, есть ли у нас идентификатор клиента в модели, а если нет, мне нужно найти div в отрезанных и удалить его.

Как это достижимо?

Answer 1

Если у вас есть JQuery вы можете сделать это следующим образом:

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

Я не очень хорошо знаком с додзе, но верю это может быть сделано подобным образом с dojo.create, dojo.destroy и dojo.query.

Answer 2

Попробуйте использовать:

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

Как и другие ответы, вероятно, лучше всего разобрать фрагмент, который у вас есть, и использовать методы манипуляции с dom, чтобы удалить то, что вам нужно. Это похоже на ответ @ Дариена, но моя включает в себя необходимые зависимости и является рабочим примером.

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 присутствует, и удаляет указанные узлы, если это не так.

Here's a fiddle так что вы можете играть с has_customerid и делать все, что вам нужно для узла. Вероятно, вы хотите проверить результаты query(...); Я отказался от проверки ошибок.