jQueryで特定の文字を削除したい

Question

以下のソースコードで先頭の半角空白と>を削除して、【パンくず1】を先頭にしたいです。

<div class="p-breadcrumbs">
 &gt; 
<span property="itemListElement" typeof="ListItem">
  <a property="item" typeof="WebPage" title="Go to Home." href="http://localhost/dev/kaizenbase/en/" class="post post-page">
    <span property="name">パンくず1</span>
  </a>
<meta property="position" content="2">
</span>
 &gt; 
<span class="post post-page current-item">パンくず2</span>
</div>

 > パンくず1 > パンくず2

↓　消したい　｜　先頭の半角空白と>と>の後の半角空白を削除したい

パンくず1 > パンくず2

Comments

[m.ts10806]

なぜ出力後に削除する必要があるのでしょうか。前提や背景、経緯は明記してください。
（それに質問ではなく丸投げの作業依頼になっています）

Answer 1

HTMLの構造がテキストノードの位置も含めて変わらないという前提で

const element = document.querySelector(".p-breadcrumbs");
element.removeChild(element.firstChild);

Comments

[komurojun]

試してみましたが自分の環境だとうまく消せませんでした。
でも、親切にありがとうございました。

Answer 2

HTML内に書いてしまった文字をなくすることはあまりおすすめできません。
パンくずリストならul-liで書けばきれいに表示されると思いますが・・・

Comments

[yambejp]

どうしてもいまのHTML構造がかえられないならこんな感じ？
$(function(){
$('.p-breadcrumbs').contents().filter(function(){
return $(this).text().match(/>/);
}).eq(0).remove();
});

[komurojun]

こちらで、無事に消せました。
大変助かりました。ご親切にありがとうございました。