如何移除 <br> 标签及其后面的所有内容？

Question

如何移除 <br> 标签及其后面的所有内容？

3

如果我按照以下步骤进行操作，那么就可以顺利完成：

<div id="results">
  <p>Hello<br>there</p>
</div>

$($("#results p").children('br').get(0).nextSibling).remove();

I get: hello

But if I do:

<th class="infobox">Head</th>
<td>Hello<br>there</td>

var newLineRemove = $(".infobox td").children('br').get(0).nextSibling();
$wikiDOM.find(newLineRemove).remove();

这个错误信息是“未捕获类型错误：无法读取未定义的 nextSibling 属性”。

- rob.m

是因为<td>不在.infobox里面，所以你的选择器$(".infobox td")没有返回任何内容，因此你对.children('br')的调用也不会有任何结果？ - Forty3

1

@Forty3，是的，我看到了那个错误，但我不会改变问题，因为有两个错误，一个是你提到的，另一个更好的解释在下面的一个答案中。 - rob.m

$($(".infobox").next("td").children("br")[0].nextSibling).remove() - nnnnnn

@nnnnnn 不对 https://jsfiddle.net/jikupin/pz3ce0o6/1007/ )处有错误。 - rob.m

所以删除多余的 )，这不是什么高深的科学（我已经编辑了我的评论）。在那之后，你的小样就无法工作了，因为你把 TD 和 TH 放在了 TABLE 外面，所以浏览器不会将它们视为 TD 和 TH - 把它们放在一个带有 TR 的 TABLE 中，它就可以工作了：https://jsfiddle.net/pz3ce0o6/1018/。 - nnnnnn

@nnnnnn非常好，您能把这个放到答案里面吗？我会接受它的。另一个答案也可以，但是您的更符合提供的代码，谢谢。 - rob.m

3个回答

2

我有一个最简单的解决方案，试试这个：

$('td').each(function() {
  $(this).html($(this).html().split('<br>')[0]);
});

li {
  margin-bottom: 10px;
}

#usp-custom-3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <th class="infobox"></th>
  </tr>
  <tr>
    <td>Hell
      <br>there</td>

  </tr>
  <tr>
    <td>Hello
      <br>there<br>there</td>

  </tr>
</table>

- Govind Samrow

请注意，这将使用第一行的值覆盖所有行。(将第二行更改为“Hi”而不是“Hello”，以了解我的意思。) 您可以通过执行类似于 $ ("td").html(function(i, h) { return h.split('<br>')[0] }) 的操作来修复它。 - nnnnnn

1

你的代码无法正常工作，因为".infobox td"选择器是在寻找.infobox元素内部的元素，但在你的HTML中，td紧接着出现在.infobox之后。

如果你想要与你现有的JS非常相似，但适用于这个HTML（需要注意的是，td和th元素需要在table的tr内），你可以这样做：

$($(".infobox").next().children("br")[0].nextSibling).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<th class="infobox"></th>
<td>Hello<br>there</td>
</tr>
</table>

也就是说，使用.next()来获取.infobox后面的元素，获取该元素的子级br元素，取第一个元素的.nextSibling，然后将其包装在jQuery对象中，以便您可以调用.remove()。

编辑：请注意，如果有多个具有类似元素的行，则上述代码仅会在第一行上执行删除操作。如果这是我的代码，我可能会选择选择所有相关元素，然后更新它们的HTML，类似于以下内容：

$(".infobox").next("td").html(function(i, h) { return h.split('<br>')[0] })

- nnnnnn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Titus · Accepted Answer

那是因为.get(...)返回的是一个DOM元素而不是jQuery对象。在第一个例子中，你使用了$(...)将该DOM元素转换为jQuery对象，但是在第二个例子中没有这样做。

这将把DOM元素转换为jQuery元素并消除错误。

var newLineRemove = $($(".infobox td").children('br').get(0).nextSibling);

但它不会按照你的意愿执行，因为正如@Forty3所说的那样，<td>不在infobox内部。这个看起来行得通，但我可能把事情弄得比必要的复杂了。

$(function(){
  var td = $(".infobox").next();
  if(td.find("br").length){
    $(td.contents().get().reverse()).each(function(){
      $(this).remove();
      if(this.tagName == "BR"){
        return false;
      }
    });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<th class="infobox"></th>
<td>Hello<br>there</td>
</table>