Skip to content

Instantly share code, notes, and snippets.

@shiblisec

shiblisec/list.html

Last active November 5, 2023 07:29
Show Gist options
  • Save shiblisec/96c898f74f085f6a871a8e000b61f0d0 to your computer and use it in GitHub Desktop.
Save shiblisec/96c898f74f085f6a871a8e000b61f0d0 to your computer and use it in GitHub Desktop.
Download ZIP
Simple JS code to demonstrate list addition/deletion features
Raw
list.html
<html>
<body>
<style>
.itembox{
margin-bottom: 10px;
}
</style>
<div class="wrapperBox">
<div class="itembox"><input type="text" class="item" /></div>
<div class="itembox"><input type="text" class="item" /></div>
</div>
<input type="button" value="add" onclick="addField()" /><input type="button" value="delete" onclick="deleteField()" />
</body>
<script>
var addField = () => {
var newitem = document.createElement('div');
var textfield = document.createElement('input');
newitem.setAttribute('class','itembox');
textfield.setAttribute('class','item');
newitem.appendChild(textfield);
document.getElementsByClassName('wrapperbox')[0].appendChild(newitem);
}
var deleteField = () => {
var len = document.getElementsByClassName('wrapperbox').length;
document.getElementsByClassName('wrapperbox')[0].removeChild(document.getElementsByClassName('itembox')[len -1]);
}
<!-- test comment -->
<!-- new comment -->
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment