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>")));