更改.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>添加了一個ID，並對您的名稱ID進行了重複數據刪除。

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