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/ツールのバージョンなど） |
| ここにより詳細な情報を記載してください。 |
