cloneで追加したものをクリック後削除したい

cloneで追加し、クリックされたら削除

cloneで追加したものをクリックしたら削除するというプログラムを作りたいのですが削除の部分がうまく動いてくれません。
要素の指定の仕方、または書き方が違うのだと思うのですが指摘していただけると助かります。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title></title>
6	<link href="" rel="stylesheet">
7	<script src="js/jquery/jquery-3.3.1.min.js"></script>
8</head>
9<body>
10	<form class = "form0" id = "form0">
11		<div class = "editing_modal_window">
12			<div class = "cross_mark">×</div>
13			<div class = "editing_div1">ユーザー名</div>
14			<input type = "text" class = "user_name0">
15			<div class = "editing_div2">備考</div>
16			<input type = "text" class = "memo0">
17			</br>
18			</br>
19			<input type = "button" class = "button1" value = "OK">
20			<input type = "button" class = "button2" value = "キャンセル">
21			<div class = "clear"></div>
22		</div>
23	</form>
24	<div id = "add">+</div>
25	<script type="text/javascript" src=""></script>
26</body>
27</html>

javascript
1var i = 0;
2
3$(function(){
4	$("#add").on('click',function(){
5		var original = $('#form' + i );
6		i++;
7		var id = 'form' + i;
8		$(original)
9			.clone(true)
10				.insertAfter($(original))
11					.attr('id',id);
12	});
13});
14
15		$("#form"+ i ,".cross_mark").on('click',function(){
16			$("#form" + i).remove();
17		});
18
19
20$("#form + i",".button1,.button2").click(function(){
21	$(".editing_modal_window").fadeOut();
22});

css
1.editing_modal_window {  margin: 10px 20px;
2  background-color:#fff;
3  padding: 0px 20px 20px 20px;
4  border :1px solid black;
5  width: 410px;
6  z-index: 3;
7  position: relative;
8}
9.cross_mark {border: 1px solid black;
10margin:0px;
11text-align:center;
12width: 20px;
13margin: 0px 0px 0px 410px;
14border-top: 0;
15border-right: 0;
16}
17
18.user_name0 {  width: 400px;
19  height: 20px;
20}
21.editing_div2 {  margin:10px 0px 0px 0px;
22}
23.memo0 {  width: 400px;
24  height: 60px;
25}
26.button1 {  width: 180px;
27margin: 0px 40px 0px 0px;
28}
29.button2 {  width: 180px;
30}
31#add{  margin: 20px 20px;
32  border: 1px solid black;
33  width: 450px;
34  text-align: center;
35  position: relative;
36  z-index: 2;
37  background-color:#fff;
38}
39

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

回答3件

ベストアンサー

手っ取り早さでいえば、onClickをHTML側で付けておいて

html
1            <div class = "cross_mark" onClick="form_remove(this);">×</div>
2

remove用で関数にしておくと言うのが良いですね。

javascript
1function form_remove(cross_mark_el){
2	$(cross_mark_el).closest('form').remove();
3}
4

投稿2018/03/11 09:35

kszk311

総合スコア3404

退会済みユーザー

2018/03/11 10:06

あ！確かにそれなら動きそうです！！回答ありがとうございます！！

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

とりあえず、動きを把握しやすいソースでサンプル描いて見ました。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title>サンプル</title>
6		<style type="text/css">
7			.clonable {
8				border: 1px solid #CCC;
9			}
10		</style>
11	</head>
12	<body>
13		<div class="container clonable-container">
14			<div class="clonable">
15				<input type="text" name="input" />
16				<button class="add" type="button">+</button>
17				<button class="del" type="button">-</button>
18			</div>
19		</div>
20		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
21		<script type="text/javascript">
22			"use strict";
23			$(function () {
24				$(".clonable-container").on('click', '.clonable .add', function () {
25					var clonable = $(this).closest('.clonable');
26					$(".clonable-container").append(clonable.clone());
27				}).on('click', '.clonable .del', function () {
28					var clonable = $(this).closest('.clonable');
29					clonable.remove();
30				});
31			});
32		</script>
33	</body>
34</html>

投稿2018/03/11 10:00

退会済みユーザー

総合スコア0

退会済みユーザー

2018/03/11 10:09

参考になります！！コードも簡潔でわかりやすいですね！！回答ありがとうございました！！

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

ところどころあるiは変数のことを指していると思いますが
「iが0のとき」しかここを通過しないの意図と違うのではないかと思います。

javascript
1$("#form"+ i ,".cross_mark").on('click',function(){
2            $("#form" + i).remove();
3});

ここがそうですね。
このコードで動かす場合はiが増加したあと再度このコードを
実行しないといけません。

javascript
1$("#form + i",".button1,.button2").click(function(){
2    $(".editing_modal_window").fadeOut();
3});

ここはセレクタが変だと思います。
"#form + i"だと「idがformの隣接兄弟iタグ」になります。

投稿2018/03/11 07:11

sousuke

総合スコア3828

退会済みユーザー

2018/03/11 07:27

回答ありがとうございます。もう一度考え直してみます。

退会済みユーザー

2018/03/11 09:02

すみません考えたのですが、どう書けばいいのか分からず終いです、、、

sousuke

2018/03/11 12:14

いろいろな部分が多分違うので上記の部分だけ直したとしてもうまくいきません。 iの中身と削除ボタンのイベントを考えてください。 iはどんどん増えていって減ることが無いので、 $("#form" + i).remove(); このコードはほぼ思い通りにならないと思います。iはイベントを登録したときがたとえ1だったとしてもその中のiの中身まで都合よく保持してくれません。つまりどのボタンも同じ部分しか消せません。

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

あなたの回答