Created
May 13, 2024 05:36
-
-
Save EncodeTheCode/d4d5d55f0631556eebb9941a9dc7a79b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Delete Boxes</title> | |
<style> | |
.box { | |
width: 100px; | |
height: 100px; | |
background-color: lightblue; | |
margin: 10px; | |
display: inline-block; | |
text-align: center; | |
line-height: 100px; | |
} | |
</style> | |
</head> | |
<body> | |
<select id="boxSelect"> | |
<!-- Options will be dynamically added here --> | |
</select> | |
<button onclick="deleteBox()">Delete Box</button> | |
<button onclick="createNewBox()">Create New Box</button> | |
<label for="deleteAscending">Ascending Order</label> | |
<input type="checkbox" id="deleteAscending"> | |
<div id="boxContainer"> | |
<!-- Boxes will be dynamically created here --> | |
</div> | |
<script> | |
// Function to create a unique data-id | |
class DataIdGenerator { | |
constructor() { | |
this.counter = 1; | |
} | |
generateId() { | |
return 'data-id-' + this.counter++; | |
} | |
} | |
// Instantiate DataIdGenerator | |
const dataIdGenerator = new DataIdGenerator(); | |
// Function to create a box with unique data-id | |
function createBox(dataId) { | |
const boxContainer = document.getElementById('boxContainer'); | |
const box = document.createElement('div'); | |
box.setAttribute('class', 'box'); | |
box.setAttribute('data-id', dataId); | |
box.textContent = dataId; | |
boxContainer.appendChild(box); | |
// Add option to select box dropdown | |
const boxSelect = document.getElementById('boxSelect'); | |
const option = document.createElement('option'); | |
option.value = dataId; | |
option.textContent = dataId; | |
boxSelect.appendChild(option); | |
} | |
// Function to create a new box with unique data-id | |
function createNewBox() { | |
let dataId; | |
// Check if data-id already exists | |
do { | |
dataId = dataIdGenerator.generateId(); | |
} while (document.querySelector(`.box[data-id="${dataId}"]`)); | |
createBox(dataId); | |
// Reorder dropdown based on checkbox state | |
reorderDropdown(); | |
} | |
// Create 10 boxes initially | |
for (let i = 0; i < 10; i++) { | |
createNewBox(); | |
} | |
// Function to delete box with specified data-id | |
function deleteBox() { | |
const boxSelect = document.getElementById('boxSelect'); | |
const boxContainer = document.getElementById('boxContainer'); | |
const selectedDataId = boxSelect.value; | |
if (selectedDataId !== '') { | |
const boxToDelete = document.querySelector(`.box[data-id="${selectedDataId}"]`); | |
if (boxToDelete) { | |
boxToDelete.parentNode.removeChild(boxToDelete); | |
// Remove option from select dropdown | |
boxSelect.remove(boxSelect.selectedIndex); | |
} else { | |
alert('Box with specified data-id not found!'); | |
} | |
} else { | |
alert('Please select a box to delete!'); | |
} | |
// Reorder dropdown based on checkbox state | |
reorderDropdown(); | |
} | |
// Function to reorder dropdown based on checkbox state | |
function reorderDropdown() { | |
const boxSelect = document.getElementById('boxSelect'); | |
const deleteAscending = document.getElementById('deleteAscending').checked; | |
const options = Array.from(boxSelect.options); | |
options.sort((a, b) => { | |
if (deleteAscending) { | |
return a.value.localeCompare(b.value); | |
} else { | |
return b.value.localeCompare(a.value); | |
} | |
}); | |
boxSelect.innerHTML = ''; | |
options.forEach(option => { | |
boxSelect.appendChild(option); | |
}); | |
} | |
// Function to handle checkbox change | |
document.getElementById('deleteAscending').addEventListener('change', function() { | |
reorderDropdown(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment