.text() 콘텐츠를 변경하고 하위 HTML 유지

Question

모든 하위 HTML을 변경하지 않고이 span 태그에서 @ 문자를 제거하는 방법을 알려주시겠습니까?

$('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(''))를 얻을 부모에게이 개 부분을 추가합니다. 그러나이 방법은 큰 문제가 있습니다. 모든 자식 html은 보관되지 않습니다.

Answer 1

나는 외부에 <span>이라는 ID를 추가했으며 사용자의 이름 ID는 중복 제거했습니다.

Answer 2

$('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>

은 첫째로 당신은 클래스 속성을 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>