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('')）并将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值中出现的所有@个字符。试试这个：

＆＃13;

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

＆＃13;

#name {
  background-color: #ccc
}

＆＃13;

<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>

＆＃13;

更改.text（）内容并保留子html

2 个答案: