【jQuery】入力欄追加のボタンを押したらdivが追加され、削除ボタンが押されたらその入力欄を削除させたい

お世話になっております。
###前提・実現したいこと
現在htmlにて管理画面のデザイン部分を作成しております。
「入力欄追加」のボタンを押したら入力欄の設置されているdivが追加され、
削除ボタンが押されたらその入力欄を削除させるという機能を実装させたいです。

###発生している問題・エラーメッセージ
下記コードのように、追加ボタンが押されたらクローンの中身を追加という方法で実装させたのですが、「削除」ボタンを押さずに「入力欄追加」し、「削除」を行えば希望通りの動作をいたします。

ところが、一度全ての入力欄を「削除」させた後に
「入力欄追加」を押すと、「入力欄追加」のボタンは問題ないのですが、
削除ボタンが動作しなくなってしまいました。

これを削除させた後にも正常に動作させたいのですが、
どこの記述を直せば良いでしょうか？

clone();を使った理由としては、ここでは省きましたが、
div.fieldの中身が実際はこれよりも相当多いため、
clone();が適していると思いこちらを使っております。

ブラウザはGoogleChrome ver 54です。

ご回答いただけますと幸いです。

###該当のソースコード

javascript
1<script>
2$(function() {
3	"use strict";
4	var $content = $('.field:last-child');
5	$('.add_btn').on('click', function() {
6		$content.clone(true).appendTo('.parent');
7});
8
9$('.trash_btn').on('click', function() {
10  	$(this).parents('.field').remove();
11	});
12});
13</script>

html
1<body>
2 <button type="button" class="btn bg-white mt10 miw100 add_btn" value="" name="">入力欄追加</button>
3    <br>
4    <br>
5        <div class="parent">
6              <div class="field" style="padding-bottom:8px; border-bottom:1px solid #ccc;margin-bottom:20px;">
7                <textarea rows="2">aaa</textarea>
8                      <button type="button" class="btn trash_btn ml10" value="" name="">
9                        削除
10                      </button>
11              </div>
12         </div>
13   </body>

行動規範の内容に同意します

回答2件

JavaScript
1$( function() {
2	"use strict";
3	var $content = $( '.field:last-child' );
4	$( '.add_btn' ).on( 'click', function() {
5		$content.clone( true ).appendTo( '.parent' );
6	} );
7	$( '.parent' ).on( 'click', '.trash_btn', function() {
8		$( this ).parents( '.field' ).remove();
9	} );
10} );
11```**動くサンプル：**[https://jsfiddle.net/8uets48b/](https://jsfiddle.net/8uets48b/)