Как удалить тег span, который не имеет атрибута в блоке HTML, используя Javascript или ExtJs - PullRequest
Новая
       11

Как удалить тег span, который не имеет атрибута в блоке HTML, используя Javascript или ExtJs

0 голосов
/ 16 февраля 2020

с использованием Javascript, я пытаюсь удалить теги span внутри HTML контента, который не имеет атрибута, но еще не нашел решения.

например, если контент html равен 

<p>
<span>
<span class="asset">&nbsp;</span>
<iframe title="title" id="dynamicid" src="https://example.com/asset/externalasset.html" style="width: 100px; height: 30px;">&nbsp;</iframe>
</span>
</p>

ожидаемый результат, 

<p>
<span class="asset">&nbsp;</span>
<iframe title="title" id="dynamicid" src="https://example.com/asset/externalasset.html" style="width: 100px; height: 30px;">&nbsp;</iframe>
</p>

1 Ответ

0 голосов
/ 16 февраля 2020

Попробуйте это:
Это имеет только одну проблему: span должен быть последним дочерним элементом своего родителя, но для вашего примера он может работать:

Изменения не могут быть видны без отображения внутреннего HTML из p (как я сделал ниже во втором фрагменте) или inspect с результатом. 

let spans = document.querySelectorAll("span");
for (let i = 0; i < spans.length; i++) {
  let span = spans[i], ih, p;
  if (span.hasAttributes() === false) {
    ih = span.innerHTML;
    p = span.parentNode;
    p.removeChild(span)
    p.innerHTML += ih;
  }
}
<p>
<span>
<span class="asset">&nbsp;</span>
<iframe title="title" id="dynamicid" src="https://example.com/asset/externalasset.html" style="width: 100px; height: 30px;">&nbsp;</iframe>
</span>
</p>

Вот пример console.log его использования: 

let spans = document.querySelectorAll("span"), arr = [];
for (let i = 0; i < spans.length; i++) {
  let span = spans[i], ih, p;
  if (span.hasAttributes() === false) {
    ih = span.innerHTML;
    p = span.parentNode;
    p.removeChild(span)
    p.innerHTML += ih;
    arr.push(p); //added to console.log the innerHTML of the parent
  }
}

//console.log the parents' innerHTML
for (let j = 0; j < arr.length; j++) {
  ih = arr[j].innerHTML;
  console.log(ih);
}
<p>
<span>
<span class="asset">&nbsp;</span>
<iframe title="title" id="dynamicid" src="https://example.com/asset/externalasset.html" style="width: 100px; height: 30px;">&nbsp;</iframe>
</span>
</p>
...