Good day to all! I am learning java script, jquery, php. I do a small task scheduler, there is an information entry field, and there is an information input button. When I typed the information, after clicking on the button, the text is added to the list, then I want to make it so that after each information is added to the list, another button will immediately appear, which will be called "Complete", then by clicking on this button, it will be crossed out the text to which this button applies.
<div id="todo"> <h1>Todo list</h1> <input type="text" name="todo"/> <button>Add</button> </div> <ul> <?php foreach($_COOKIE as $key => $value){ if(strpos($key, "todo") === 0) echo "<li>" . $value . "<a href='#' id='" . $key . "'>x</a></li>"; } ?> <button class="complete" style="display: none;"> </ul> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="script.js"></script> // code in the script file is:
var main = function(){ $("button").click(function(){ var forTime = new Date(); var year = forTime.getFullYear(); var day = forTime.getDay(); var month = forTime.getMonth(); var hours = forTime.getHours(); var min = forTime.getMinutes(); var sec = forTime.getSeconds(); var todo = $("input").val(); var text = "время добавления задачи: "; if(day < 10) day = "0" + 1; else if (day == 0) day += 1; if(month < 10) month = "0" + month; if(min < 10) min = "0" + min; if(sec < 10) sec = "0" + sec; var li = "<li>" + todo + ". // " + text + hours + ":" + min + ":" + sec + ", дата: " + day + "." + month + "." + year + " г." + "<a href='#'>x</a>" + "</li>"; $("year").css("font-size: 12px", "color: red"); $("ul").prepend(li).addClass('border'); }); //end onclick button $("a").click(function(){ $.ajax({ method: "POST", url: "remove.php", data: {"key": $(this).attr("id")} }); $(this).closest("li").remove(); }); } $(document).on('click', '.complete', function(){ $(this). }); $(document).ready(main); 
