The logic of the code makes sense to me, but there is clearly an error preventing the button from functioning. Am I missing effects in CSS such as hover, and what is the main structural problem with the code that prevents the jquery portion from working. Am meant to use the jquery-ui library for this. Any help would be very much appreciated.
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js_lib/jquery-ui.js"></script>
<title>A Simple Notes List</title>
<h1><span>A Simple Notes List</span></h1>
</div>
<div id="canvas" class="container group">
<div id="primaryContent" class="group">
<p> </p>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<p>Click item on list to remove item from list</p>
</div>
<script src="script.js">
// JavaScript Document
$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>");
});
$('.list').click(function(){
});
});
$(document).on('click', '.item', function(){
$(this).remove();
});
Update with working code snippet to determine if reopen is required:
"use strict";
// JavaScript Document
$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>");
});
$('.list').click(function(){
});
});
$(document).on('click', '.item', function(){
$(this).remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h1><span>A Simple Notes List</span></h1>
<div id="canvas" class="container group">
<div id="primaryContent" class="group">
<p> </p>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<p>Click item on list to remove item from list</p>
</div>
</div>
