htmlで画面遷移せずに<img>等の表示された画像を削除したい

Question

htmlで画面遷移せずに<img>等の表示された画像を削除したいのですがよい方法はないでしょうか。
type="hidden"等で見えなくするのではなく、例えば、ボタン等を押すと完全削除できるようにすることは可能でしょうか。

Comments

[Alice0225]

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けています
わからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

Answer 1

JavaScriptを使えば可能です。

純粋なJavaScriptで書くなら親まで取得した上で.removeChild()を使う方法がありますし、jQueryありの状況なら.remove()を使えます。

Answer 2

<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){

    // click
    $("#btn").on("click",function(){
    	$ele = $("img");
		$ele.remove(); // ここでimg要素を削除
    })
 });
</script>
<p>1行</p>
<div id="div1">
<input id="btn" type="button" />
<img id ="img" src="a.jpg" width="100px" height="100px">
<div>
<p>2行</p>

上の説明を基にサンプルコードです。

Answer 3

jQueryのremove()を使った場合
ボタンをクリックしたら、要素（imgタグ）をremoveする、でいかがでしょう。
http://codepen.io/anon/pen/RrNwyB?editors=101

また、下記jQueryのremove()についてです。
http://semooh.jp/jquery/api/manipulation/remove/%5Bexpr%5D/