Skip to content

Instantly share code, notes, and snippets.

@mshahin364

mshahin364/index.html

Created May 20, 2020 17:47
Show Gist options
  • Save mshahin364/b817803a891176b544281e9d0c1cd15b to your computer and use it in GitHub Desktop.
Save mshahin364/b817803a891176b544281e9d0c1cd15b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/simevadoxi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="Title" align="center">
<h1>Hello</h1>
<p>This website will use JavaScript to create interactive elements.</p>
</div>
<div class="1">
<h3>Test 1</h3>
<ul id="list">
<li>Milk <button class="remove">Remove</button></li>
<li>Eggs <button class="remove">Remove</button></li>
</ul>
<input id="textbox">
<button id="add">Add to list</button>
</div>
<script id="jsbin-javascript">
$('#add').click(function() {
var listvalue = $('#textbox').val() || "";
$("#textbox").val("");
// $('ul').append('<li>' + listvalue + '</li>');
var liEl = document.createElement('li');
// liEl.append('button');
// $(liEl).append(listvalue + '<button class="remove">Remove</button>');
// $('ul').append(liEl);
// liEl.append(listvalue);
// $(liEl).text('sfsdf').append('<button class="remove">Remove</button>');
var span = document.createElement('span');
$(span).text(listvalue)
$(liEl).append(span).append('<button class="remove">Remove</button>');
$('ul').append(liEl);
});
$('#textbox').keypress(function(event) {
if(event.which === 13) {
var listvalue = $('#textbox').val();
$('#textbox').val("");
// var liEl = document.createElement('li');
// liEl.append('button');
// $(liEl).append('<button class="remove">Remove</button>').html('<button class="remove">Remove</button>');
// $('ul').append(liEl);
// $('ul').append('<li>' + listvalue + ' <button class="remove">Remove</button></li>');
// var $newStudent = $("<li>"+ listvalue +"</li>");
// $($newStudent).html('<button class="remove">Remove</button>');
// $("ul").append($newStudent);
$('ul').append('<li>' + listvalue + ' <button class="remove">Remove</button></li>');
}
});
$('#list').on('click', 'li .remove', function(e) {
$(this).parent().remove();
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="Title" align="center">
<h1>Hello</h1>
<p>This website will use JavaScript to create interactive elements.</p>
</div>
<div class="1">
<h3>Test 1</h3>
<ul id="list">
<li>Milk <button class="remove">Remove</button></li>
<li>Eggs <button class="remove">Remove</button></li>
</ul>
<input id="textbox">
<button id="add">Add to list</button>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript"> $('#add').click(function() {
var listvalue = $('#textbox').val() || "";
$("#textbox").val("");
// $('ul').append('<li>' + listvalue + '</li>');
var liEl = document.createElement('li');
// liEl.append('button');
// $(liEl).append(listvalue + '<button class="remove">Remove</button>');
// $('ul').append(liEl);
// liEl.append(listvalue);
// $(liEl).text('sfsdf').append('<button class="remove">Remove</button>');
var span = document.createElement('span');
$(span).text(listvalue)
$(liEl).append(span).append('<button class="remove">Remove</button>');
$('ul').append(liEl);
});
$('#textbox').keypress(function(event) {
if(event.which === 13) {
var listvalue = $('#textbox').val();
$('#textbox').val("");
// var liEl = document.createElement('li');
// liEl.append('button');
// $(liEl).append('<button class="remove">Remove</button>').html('<button class="remove">Remove</button>');
// $('ul').append(liEl);
// $('ul').append('<li>' + listvalue + ' <button class="remove">Remove</button></li>');
// var $newStudent = $("<li>"+ listvalue +"</li>");
// $($newStudent).html('<button class="remove">Remove</button>');
// $("ul").append($newStudent);
$('ul').append('<li>' + listvalue + ' <button class="remove">Remove</button></li>');
}
});
$('#list').on('click', 'li .remove', function(e) {
$(this).parent().remove();
});</script></body>
</html>
Raw
jsbin.simevadoxi.js
$('#add').click(function() {
var listvalue = $('#textbox').val() || "";
$("#textbox").val("");
// $('ul').append('<li>' + listvalue + '</li>');
var liEl = document.createElement('li');
// liEl.append('button');
// $(liEl).append(listvalue + '<button class="remove">Remove</button>');
// $('ul').append(liEl);
// liEl.append(listvalue);
// $(liEl).text('sfsdf').append('<button class="remove">Remove</button>');
var span = document.createElement('span');
$(span).text(listvalue)
$(liEl).append(span).append('<button class="remove">Remove</button>');
$('ul').append(liEl);
});
$('#textbox').keypress(function(event) {
if(event.which === 13) {
var listvalue = $('#textbox').val();
$('#textbox').val("");
// var liEl = document.createElement('li');
// liEl.append('button');
// $(liEl).append('<button class="remove">Remove</button>').html('<button class="remove">Remove</button>');
// $('ul').append(liEl);
// $('ul').append('<li>' + listvalue + ' <button class="remove">Remove</button></li>');
// var $newStudent = $("<li>"+ listvalue +"</li>");
// $($newStudent).html('<button class="remove">Remove</button>');
// $("ul").append($newStudent);
$('ul').append('<li>' + listvalue + ' <button class="remove">Remove</button></li>');
}
});
$('#list').on('click', 'li .remove', function(e) {
$(this).parent().remove();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment