EncodeTheCode/data-id_manager8.htm

## data-id_manager8.htm
<!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>
	<!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>