Deleting an element from an array in JavaScript by its index

Question

Deleting an element from an array in JavaScript by its index

I'm currently working on a todo type app and I need to figure out how to remove an array element. Adding elements using element.push() is straightforward, but removing them is a bit more challenging. The remove button is nested within a template literal in a for loop, which complicates things. I've come across another method that uses

node.parentNode.removeChild(node);

, but since this involves an array data structure, I suspect the approach will be different. This project serves as a learning playground for me, so any help would be appreciated. Here's what my code looks like:

const main = document.querySelector('.app');
const header = document.createElement('DIV');
const hero = document.createElement('DIV');
const heading = document.createElement('H1');
heading.textContent = 'Heading Tag';
main.before(heading);

const data = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday"
];

// Code continues...

let removeItem = document.getElementById('removeItem');
removeItem.addEventListener('click', (data) => {

  for (let i = 0; i < removeItem.length; i++) {
    data.splice(i, 1);
  }
});

Could indexOf be a viable solution here?

javascript arrays

Answer 1

Answer №1

I have successfully implemented your code and made some enhancements from line 86 to 120.


const container = document.querySelector('.main');
const topSection = document.createElement('DIV');
const bottomSection = document.createElement('DIV');
const headline = document.createElement('H1');
headline.textContent = 'Main Heading';
container.before(headline);

var items = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
];

const addTopSection = () => {
topSection.textContent = 'Top Section Title';
topSection.classList.add('top-section');
topSection.innerHTML = '<div class="innerContent">Inner Content</div>';
topSection.setAttribute(
 "style", "font-size: 32px; font-style: italic; background-color:#ff0000; color: white; width: 100%; height: 200px; padding: 20px; font-family: sans-serif"); 
container.append(topSection);
}

const addBottomSection = () => {
    bottomSection.textContent = 'Bottom Section Title';
    bottomSection.classList.add('bottom-section');
    bottomSection.innerHTML = '<div class="innerBlock">Inner Block</div>';
    bottomSection.setAttribute(
     "style", "font-size: 32px; font-style: italic; background-color:#000000; color: white; width: 100%; height: auto; padding: 20px; font-family: sans-serif"); 
    container.append(bottomSection);
}

 const generateListItems = (elements) => {
    let list = ''; 
    for (let i = 0; i < elements.length; i++) {
        list += `<li>${elements[i]}</li><button type='button' class='removeItem'>Remove Item</button>`;

    }
    return list;
    
    }

const arrangeContent = () => {
    const layout = addTopSection() + addBottomSection();
}
arrangeContent();


const addToItemList = () => {
    const addButton = document.getElementById('addButton');
    const inputField = document.getElementById('input').value;
    items.push(inputField);    
    updateHTML(items);  
}

const removeLastItem = () => {
    items.pop(items);    
    updateHTML(items);  
}

const removeFromSpecificIndex = (index) => {
// One-liner code to remove an element in an array, feel free to ask if you need clarification.
        (index > -1) ? items.splice(index, 1) : false;
        updateHTML(items);
}

const updateHTML = (items) => {
    let finalHtml = `
    <ul>
        ${generateListItems(items)}
    </ul>
    <input type='input' id="input" required></input><button type='button' id='addButton'>Add item</button><button id='removeButton'>Remove item</button>
    `
    document.querySelector('.bottom-section').innerHTML = finalHtml;

    addButton.addEventListener('click', () => {
        addToItemList();
    });

    removeButton.addEventListener('click', () => {
        removeLastItem();
    });

    listenToClicks("removeItem", function(index) {
        removeFromSpecificIndex(index);
    })
 }  

function listenToClicks(className, action) {

    // Apply click handler to all elements with matching className
    var allElements = document.body.getElementsByTagName("*");

    for(var x = 0, len = allElements.length; x < len; x++) {
        if(allElements[x].className == className) {
            allElements[x].onclick = handleClick;
        }
    }

    function handleClick() {
        var parentElement = this.parentNode;
        var childrenOfParent = parentElement.childNodes;
        var index = 0;

        for(var x = 0; x < childrenOfParent.length; x++) {
            console.log(childrenOfParent[x]);
            if(childrenOfParent[x] == this) {
                break;
            }

            if(childrenOfParent[x].className == className) {
                index++;
            }
        }

        action.call(this,index);
    }
}

 updateHTML(items);

This method was inspired by the solution found in Get clicked class index javascript

The listenToClicks() function sets up an event listener on an HTML tag and provides the index of that tag relative to others with the same name.

Answer 2

I have successfully implemented your code and made some enhancements from line 86 to 120.


const container = document.querySelector('.main');
const topSection = document.createElement('DIV');
const bottomSection = document.createElement('DIV');
const headline = document.createElement('H1');
headline.textContent = 'Main Heading';
container.before(headline);

var items = [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
];

const addTopSection = () => {
topSection.textContent = 'Top Section Title';
topSection.classList.add('top-section');
topSection.innerHTML = '<div class="innerContent">Inner Content</div>';
topSection.setAttribute(
 "style", "font-size: 32px; font-style: italic; background-color:#ff0000; color: white; width: 100%; height: 200px; padding: 20px; font-family: sans-serif"); 
container.append(topSection);
}

const addBottomSection = () => {
    bottomSection.textContent = 'Bottom Section Title';
    bottomSection.classList.add('bottom-section');
    bottomSection.innerHTML = '<div class="innerBlock">Inner Block</div>';
    bottomSection.setAttribute(
     "style", "font-size: 32px; font-style: italic; background-color:#000000; color: white; width: 100%; height: auto; padding: 20px; font-family: sans-serif"); 
    container.append(bottomSection);
}

 const generateListItems = (elements) => {
    let list = ''; 
    for (let i = 0; i < elements.length; i++) {
        list += `<li>${elements[i]}</li><button type='button' class='removeItem'>Remove Item</button>`;

    }
    return list;
    
    }

const arrangeContent = () => {
    const layout = addTopSection() + addBottomSection();
}
arrangeContent();


const addToItemList = () => {
    const addButton = document.getElementById('addButton');
    const inputField = document.getElementById('input').value;
    items.push(inputField);    
    updateHTML(items);  
}

const removeLastItem = () => {
    items.pop(items);    
    updateHTML(items);  
}

const removeFromSpecificIndex = (index) => {
// One-liner code to remove an element in an array, feel free to ask if you need clarification.
        (index > -1) ? items.splice(index, 1) : false;
        updateHTML(items);
}

const updateHTML = (items) => {
    let finalHtml = `
    <ul>
        ${generateListItems(items)}
    </ul>
    <input type='input' id="input" required></input><button type='button' id='addButton'>Add item</button><button id='removeButton'>Remove item</button>
    `
    document.querySelector('.bottom-section').innerHTML = finalHtml;

    addButton.addEventListener('click', () => {
        addToItemList();
    });

    removeButton.addEventListener('click', () => {
        removeLastItem();
    });

    listenToClicks("removeItem", function(index) {
        removeFromSpecificIndex(index);
    })
 }  

function listenToClicks(className, action) {

    // Apply click handler to all elements with matching className
    var allElements = document.body.getElementsByTagName("*");

    for(var x = 0, len = allElements.length; x < len; x++) {
        if(allElements[x].className == className) {
            allElements[x].onclick = handleClick;
        }
    }

    function handleClick() {
        var parentElement = this.parentNode;
        var childrenOfParent = parentElement.childNodes;
        var index = 0;

        for(var x = 0; x < childrenOfParent.length; x++) {
            console.log(childrenOfParent[x]);
            if(childrenOfParent[x] == this) {
                break;
            }

            if(childrenOfParent[x].className == className) {
                index++;
            }
        }

        action.call(this,index);
    }
}

 updateHTML(items);

This method was inspired by the solution found in Get clicked class index javascript

The listenToClicks() function sets up an event listener on an HTML tag and provides the index of that tag relative to others with the same name.

Deleting an element from an array in JavaScript by its index

Answer №1

Similar questions

Tips for Keeping Sub Menu Visible Without Having to Click

Ways to display multiple PHP pages in a single division

Using NextJS to render a Link component by creating an element

The value of a variable decreases upon being utilized in an Ajax API call

Utilize jQuery to interact with a Web API web service

Guide to making a dropdown menu that pulls information from a text box and displays the location within the text

Using jQuery, how can I dynamically change the stacking order of an element when clicked?

When should vuex be used for storing data instead of relying on local component data?

retrieving multiple values in ajax call and processing them in controller function

Using jQuery to target form elements that have a specific class assigned to them

Is there a way to pass attributes to BufferGeometry in THREE.js without using ShaderMaterial?

Conceal the scroll bar while still allowing for scrolling functionality

Detecting repeated keys in a query for a REST connector in loopback

Avoiding an endless JavaScript loop in Selenium/PhantomJS to improve test automation sanity

Create an index.html file using webpack to utilize it with the development server

Opening a Bootstrap Modal in React without relying on npm react-bootstrap

What is the best way to iterate over my JSON data using JavaScript in order to dynamically generate cards on my HTML page?

Utilize strings as object keys in JavaScript

Using Angular 2 routes to navigate to various applications

Problem with PHP function