Изменить текст .text() и сохранить дочерний html

Question

Можете ли вы рассказать мне, как удалить символ @ из этого тега span без изменения всех дочерних html (ов)?

$('button').click(function() { 
 
    // ... 
 
});

#name { 
 
    background-color: #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span> 
 
    <span id="name"> 
 
    <a href="#">Harry</a> 
 
    </span> 
 
    
 
    says: Hello @<span id="name"> 
 
    <a href="#">Hermione</a> 
 
    </span> 
 
</span><br /> 
 

 
<button>Remove</button>

Моя идея: получить родительский .text(), разделенным характер @, переопределение родительского текста (parent.text('')) и добавьте 2 части к родителю. Но этот путь имеет большую проблему: все дочерние html (ы) не будут сохранены.

Answer 1

Я добавил идентификатор внешнего <span> и дедуплицировал идентификаторы имен.

$('button').click(function() { 
 

 
    $('#outer').html($('#outer').html().replace(/@/,'')); 
 
    
 
});

#name { 
 
    background-color: #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id='outer'><span id="name"><a href="#">Harry</a></span> says: Hello @<span id="name2"><a href="#">Hermione</a></span></span> 
 

 
<br /> 
 

 
<button>Remove</button>

Answer 2

Во-первых, вы должны изменить дубликат id атрибуты для классов, или удалить их полностью.

Чтобы решить вашу проблему, вы можете пройти через узлы, находящиеся на верхнем уровне span, и удалить любые символы @, которые отображаются в любом значении textNode. Попробуйте это:

$('button').click(function() { 
 
    $('body > span').contents().each(function() { 
 
    if (this.nodeType == 3) { 
 
     this.nodeValue = this.nodeValue.replace('@', ''); 
 
    } 
 
    }); 
 
});

#name { 
 
    background-color: #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span> 
 
    <span class="name"> 
 
    <a href="#">Harry</a> 
 
    </span> says: Hello @<span class="name"> 
 
    <a href="#">Hermione</a> 
 
    </span> 
 
</span> 
 
<br /> 
 

 
<button>Remove</button>