jQueryにて、入力した文字をクリックで消そうと思った時、できなかったので質問させていただきます。
現在
HTML
1<div id="target" class="targetClass"></div> 2 <div> 3 <input type="text" id="input" value=""> 4 <input type="button" id="button" value="入力"> 5</div> 6<h2 id="title1" class="title3">jqueryの練習</h2> 7 <ul> 8 <li id="javascript">javascript</li> 9 <li id="jquery">jquery</li> 10 <li id="php">PHP</li> 11 </ul>
となっており、
jQuery
1<script> 2 function append() { 3 $('#button').click(function() { 4 var value = $('#input').val(); 5 $('ul').append(`<li class="php">${value}<div class="remove"></div></li>`); 6 $('#input').val(''); 7 }); 8 } 9 10 function removelist() { 11 $(".input").onclick(function(){ 12 $(this).removelist(); 13 }); 14 } 15$(function() { 16 append(); 17 removelist(); 18 }); 19 </script>
これによって、入力した文字が<li id="php">PHP</li>の下に来るようになりましたが、文字の消し方がわかりません。
おそらく`removelist()` はページロード時に実行されルため、ページロード時に `.remove` というDOMは一つも存在しないことから、いくらクリックしてもDOMは削除できない状態だと思っています。
この際、どのようなコードであれば入力した文字がクリックで消せるのでしょうか?
お手数おかけしますが、よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/09 11:50