javascript - 如何删除 p 元素内的文本？

Question

假设我有这样的事情：

<p>
 <h1>Coming events</h1>
 <br>
 randomtext
randomtext
randomtext
<h1>Past events</h1>
<br>
randomtext
randomtext
randomtext
</p>

我想删除包含过去事件的 h1 以及之后的每一行文本，直到<p>关闭。我试过环绕一个 div 但这似乎对我不起作用。我还在学习jQuery的过程中。

所以我期望在 jQuery 运行后输出如下：

<p>
     <h1>Coming events</h1>
     <br>
     randomtext
    randomtext
    randomtext
</p>

Answer 1

正确的方法是包装一个div：

<p>
 <div id="sectionA">
    <h1>Coming events</h1>
    <br>
    randomtext
    randomtext
    randomtext
</div>
 <div id="sectionB">
    <h1>Past events</h1>
    <br>
    randomtext
    randomtext
    randomtext
</div>
</p>

然后像这样删除它：$('#sectionB').remove();

但如果你不能，你可以删除这样的文字：

var text = $('p').html();
text = text.substr(0,text.indexOf("<h1>Past events</h1>"));
$('p').html(text);

Answer 2

var $parent = $('p:first').parent();
var text = $parent.html();
$parent.html(text.substr(0, text.indexOf("<h1>Past events</h1>")));