Look at my Code - Problem is at next line to Comments
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> <title>Chaner</title> </head> <body <h1>My To-Do List</h1> <input type="text" placeholder="New item" /> <button id="add">Add</button> <ol id="mylist"></ol> <script> $(function() { $("#add").on("click", function() { var val = $("input").val(); if(val !== '') { var elem = $("<li></li>").text(val); $(elem).append("<button class='rem'> X </button>"); $("#mylist").append(elem); $("input").val(""); //clear the input //It should not work when under if block, but its working here... //Kindly explain why?? $(".rem").on("click",function () { $(this).parent.remove(); }); } }); }); </script> </body> </html> <style> h1 { color: #1abc9c; } .rem { margin-left: 5px; background-color: white; color: red; border: none; cursor: pointer; } </style>