jQuery append()した文字列をreplace()で置換（削除）したい

Question

jQueryのappend（）で文字列を追加後、
その文字列をreplace()で置き換え（削除）したいのですがうまくいきません。

変数を利用したいのでRegExpオブジェクトにグローバルマッチのフラグ (g)をつけたのですが
置換されません。

#####希望する動作
0. 「晴れ」をクリックするとpタグ内に「晴れ」が追加され、div#infoを表示する。
「晴れ」をクリック → <p>本日の天気は晴れです</p>

1. div#info内のdeleteボタンをクリックするとdiv#infoが消えてpタグ内は**初期値「本日の天気は」**に戻す。

「消す」をクリック → </p>本日の天気は</p>

1. 「雨」をクリックするとpタグ内に「雨」が追加され、div#infoを表示する。

「雨」をクリック → <p>本日の天気は雨です</p>

<button id="sunny">晴れ</button>
<button id="rainy">雨</button>

<div id="info" style="display: none;">
<p>本日の天気は</p>
<button id="delete">消す</button>
</div>

(function ($) {

$(#sunny).click(function(){
weather = $(this).text();
weather_info = '<b>'+ weather + '</b>です';
 $(#info > p).append(weather_info);
 $(#info).show();
})

$(#rainy).click(function(){
weather = $(this).text();
weather_info = '<b>'+ weather + '</b>です';
 $(#info > p).append(weather_info);
 $(#info).show();
})

$(#delete).click(function(){
 $(#info).hide();
 $(#info > p).replace(new RegExp(weather_info,'g'),'');
})

})(jQuery)

ご教授いただけますでしょうか。
よろしくお願いします。

Comments

[naomi3]

replace(new RegExp(weathe_info,'g'),'') の　weathe_info　→　weather_info　では？

[Te_PiN]

スミマセン、修正しました。

Answer 1

<div id="info" />内は初期状態で非表示かつdeleteボタンクリック後に非表示なので、<p />内の初期値を変更させて頂きました。-- これは元に戻しました。 deleteボタンをクリックせず、「晴れ」、「雨」を再びクリックすると、テキストがどんどん伸びてしまう不具合(?)も直っています。

タグを含む文字列の置換はあまりお勧めしません。
何でもできるのでバグが入り込みやすくなり、DOM構造(HTML)が壊れる恐れがあるからです。
DOM構造が壊れると収拾がつかなくなります。

  <button id="sunny">晴れ</button>
  <button id="rainy">雨</button>

  <div id="info" style="display: none;">
    <p>本日の天気は</p>
    <button id="delete">消す</button>
  </div>

(function ($) {
	var originalHtmlBefore = '<p>本日の天気は';
	var originalHtmlAfter  = '</p>';

	$('#sunny, #rainy').click(function(){
		var weather = $(this).text();
		var weatherHtml = originalHtmlBefore + '<b>' + weather + '</b>' + originalHtmlAfter;

		$('#info > p').replaceWith(weatherHtml);
		$('#info').show();
	});

	$('#delete').click(function(){
		$('#info').hide();
		$('#info > p').replaceWith(originalHtmlBefore + originalHtmlAfter);
	});
})(jQuery)

Comments

[Te_PiN]

ありがとうございます。
ただtext()を利用した場合、タグで囲まれている箇所だけしか削除できないですよね。
タグで囲まない箇所も削除（置換）したいのですが…

[Te_PiN]

なるほど！丁寧なご説明ありがとうございました。

Answer 2

$(#sunny) など、idをテキストを使わずに指定されていますが、そもそも動きません。$(#sunny) ⇒ $( '#sunny' ) です。
また、}) で行を終わっている箇所は }); としたほうが問題がおきにくいです。

( function( $ ) {
	var $_p = $( '#info > p' ), data = $_p.html();
	$( '#sunny, #rainy' ).click( function() {
		var weather = $( this ).text();
		var weather_info = '<b>' + weather + '</b>です';
		$_p.html( data + weather_info );
		$( '#info' ).show();
	} );
	$( '#delete' ).click( function() {
		$( '#info' ).hide();
	} );
} )( jQuery );
```**動くサンプル：**[https://jsfiddle.net/7c5x8an5/1/](https://jsfiddle.net/7c5x8an5/1/)