Удалить пробел перед удалением элемента?

Question

Я удаляю <span>, содержащийся внутри <p>. Иногда есть пространство перед тем и после<span>, которая вызывает дополнительное пространство, когда <span> удаляется из. Примечание. Я не могу изменить HTML.

JSFiddle

$('span:contains("Name"),span:contains("name"),span:contains("[]"),span:contains("[ ]")').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="item">Hi <span class="name">User Name</span> , I see you need...</p>

Так что я хочу, чтобы удалить пространство, только если оболочка удаляется.

Answer 1

Удалите пространство до и после пролета. Поместите внутрь пролета.

<p class="item">Hi<span class="name"> User Name </span>, I see you need...</p> 

Будет ли это работать?

Answer 2

заменить белое пространство ни с чем, например, так:

var str = "Test One"; 
str = str.replace(/ /g, ''); 

Answer 3

После вычистить <span></span> сделать другой выбор для <p></p> содержания и использования this идею, string = string.replace(/ +/g, ' ');

Answer 4

Вы действительно должны следить с regex/.replace подходит к этой проблеме: легко заменить все тексты, которые вы не хотите касаться.

Подход, который может быть немного «безопаснее»:

• Найдите <span> вы хотите удалить.
• Найдите свой родительский элемент.
• Проверьте, если он окружен текстовыми узлами (nodeType == 3)
• Если есть текстовый узел перед <span> вы удаляете, обрезать белое пространство конца своего nodeValue.
• Если после элемента есть текстовый узел, обрезайте пробел в начале.

Тем не менее, я не верю, что вы обрабатываете свой HTML-код и удаляете материал, это будет очень перспективным ... Небольшие изменения в содержании вызовут новые проблемы.

В качестве примера (написаны, чтобы быть ясно, а не кратким):

var spanToRemove = document.querySelector(".nestedSpan"); 
 
var spanParent = spanToRemove.parentElement; 
 
var childNodes = spanParent.childNodes; 
 
var childNodesArray = []; 
 

 
for (var i = 0; i < childNodes.length; i += 1) { 
 
    childNodesArray.push(childNodes[i]); 
 
} 
 

 
var spanIndex = childNodesArray.indexOf(spanToRemove); 
 
var textBefore = childNodes[spanIndex - 1]; 
 
var textAfter = childNodes[spanIndex + 1]; 
 

 
if (textBefore && textBefore.nodeType == 3) { 
 
    // Trims both ends, would be better to just trim right end 
 
    textBefore.nodeValue = textBefore.nodeValue.trim(); 
 
} 
 

 
if (textAfter && textAfter.nodeType == 3) { 
 
    // Trims both ends, would be better to just trim left end 
 
    textAfter.nodeValue = textAfter.nodeValue.trim(); 
 
} 
 

 
spanParent.removeChild(spanToRemove);

<p>Text before <span class="nestedSpan"> This gets removed </span> , Text after</p>