tuyopo score 10
2018/10/30 09:34 投稿
動的にdivを追加する |
### 前提・実現したいこと |
追加ボタンで新しいdivを作成し、削除ボタンでボタンに対応したdivを削除したいです。 |
また削除するときにname属性を振りなおしたいです。 |
### 発生している問題・エラーメッセージ |
``` |
削除ボタンを押したときにdivは削除されるのですが、対応したdivではなく、上から順番に削除されてしまいます。 |
また、追加ボタンでname属性を追加するところまではできたのですが、削除ボタンを押したときに振りなおす記述がわかりません。 |
``` |
### 該当のソースコード |
```ここに言語名を入力 |
<!DOCTYPE html> |
<html> |
<head> |
<title>練習</title> |
</head> |
<body> |
<div id="container" neme="edit"> |
<p>title</p> |
<input type="text"> |
<p>contents</p> |
<textarea></textarea> |
<br> |
<input type="submit" id="ok" value="ok"></button> |
<input type="button" id="cancel" value="キャンセル"></button> |
</div> |
<div id="new |
<div id="newA" style="width:300px;"> |
</div> |
<div> |
<input type="button" id="btn" value="追加"> |
</div> |
</body> |
</html> |
``` |
### 試したこと |
ここに問題に対して試したことを記載してください。 |
### 補足情報(FW/ツールのバージョンなど) |
ここにより詳細な情報を記載してください。 |
tuyopo score 10
2018/10/30 07:59 投稿
動的にdivを追加する |
### 前提・実現したいこと |
追加ボタンで新しいdivを作成し、削除ボタンでボタンに対応したdivを削除したいです。 |
また削除するときにname属性を振りなおしたいです。 |
### 発生している問題・エラーメッセージ |
``` |
削除ボタンを押したときにdivは削除されるのですが、対応したdivではなく、上から順番に削除されてしまいます。 |
また、追加ボタンでname属性を追加するところまではできたのですが、削除ボタンを押したときに振りなおす記述がわかりません。 |
``` |
### 該当のソースコード |
```ここに言語名を入力 |
<!DOCTYPE html> |
<html> |
<head> |
<mata charset="utf-8"> |
<title>練習</title> |
<link rel=stylesheet href="css/practice.css"> |
</head> |
<body> |
<div id="container" neme="edit"> |
<p>title</p> |
<input type="text"> |
<p>contents</p> |
<textarea></textarea> |
<br> |
<input type="submit" id="ok" value="ok"></button> |
<input type="button" id="cancel" value="キャンセル"></button> |
</div> |
<div id="newElem" style="width:300px;"> |
</div> |
<div> |
<input type="button" id="btn" value="追加"> |
</div> |
<script> |
var ok=document.getElementById("ok"); |
var cancel=document.getElementById("cancel"); |
var btn=document.getElementById("btn"); |
currentNumber=0; |
btn.addEventListener('click',function(){ |
currentNumber++; |
var div=document.createElement("div"); |
div.innerHTML='<div style="border:1px solid #333;width:300px;height:200px;margin:10px;"><p>ユーザー名</p><input type="text"><p>備考</p><textarea></textarea><button id="ok">ok</button><button id="cancel">キャンセル</button></div>' |
div.setAttribute("name","item"+currentNumber); |
div.id="newarea"; |
//div.setAttribute("id","newarea"+currentNumber); |
var parent=document.getElementById('newElem') |
parent.appendChild(div); |
dlt_btn=document.createElement('button'); |
dlt_btn.innerHTML="×"; |
div.insertBefore(dlt_btn,div.firstChild); |
dlt_btn.setAttribute("id","dlt"+currentNumber); |
dlt_btn.setAttribute("class","dltbtn"); |
dlt_btn.addEventListener("click",function(){ |
document.getElementById("newarea").remove() |
},false); |
},false); |
</script> |
</body> |
</html> |
``` |
### 試したこと |
ここに問題に対して試したことを記載してください。 |
### 補足情報(FW/ツールのバージョンなど) |
ここにより詳細な情報を記載してください。 |