Javascript 在JS中使用索引删除数组元素

我想从todo类型的应用程序中删除数组元素。使用

元素.push（）

可以添加。移除按钮位于for循环中的模板文本中。所以我不太明白如何删除元素。现在，我使用

node.parentNode.removeChild（node）创建另一个方法但由于这是一种数组数据方法，我认为这种方法会有所不同。这对我来说更像是一个学习/操场项目。到目前为止，我的代码是：


const main=document.querySelector（'.app'）；
const header=document.createElement（'DIV'）；
const hero=document.createElement（'DIV'）；
const heading=document.createElement（'H1'）；
heading.textContent='heading Tag'；
（标题）前的主标题；
常数数据=[
“星期一”，
“星期二”，
“星期三”，
“星期四”，
“星期五”
];
const headerElement=（）=>{
header.textContent='header'；
header.classList.add（'header'）；
header.innerHTML='Inner'；
header.setAttribute(
“样式”，“字体大小：32px；字体样式：粗体；背景色：#ff0000；颜色：白色；宽度：100%；高度：200px；填充：20px；字体系列：无衬线”）；
main.append（表头）；
}
常量元素=（）=>{
hero.textContent='hero'；
hero.classList.add（'hero'）；
hero.innerHTML='内部元素'；
hero.setAttribute(
“样式”，“字体大小：32px；字体样式：粗体；背景色：000000；颜色：白色；宽度：100%；高度：自动；填充：20px；字体系列：无衬线”）；
main.append（英雄）；
}
常量项数组=（ele）=>{
让项目=“”；
for（设i=0；i${ele[i]}删除Item`；
}
退货项目；
}
常量布局=（）=>{
常量ui=headerElement（）+heroElement（）；
}
布局（）；
常量addItemFunction=（）=>{
const addButton=document.getElementById（'addButton'）；
常量输入=document.getElementById（'input'）。值；
数据推送（输入）；
htmlInside（数据）；
}
常量removeItemFunction=（索引）=>{
const removeButton=document.getElementById（'removeButton'）；
data.pop（数据）；
htmlInside（数据）；
}
常量htmlInside=（数据）=>{
让getHtml=`

${itemArray（数据）}

添加项删除项
`
document.querySelector（'.hero'）.innerHTML=getHtml；
addButton.addEventListener（'单击'，（）=>{
addItemFunction（）；
});
removeButton.addEventListener（'单击'，（）=>{
removeItemFunction（）；
});
}
htmlInside（数据）；
让removeItem=document.getElementById（'removeItem'）；
removeItem.addEventListener（'单击'，（数据）=>{
for（设i=0；i});这很有效，我已经编写了您的代码，并在第86行到第120行中添加了一些内容


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);

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

const headerElement = () => {
header.textContent = 'Header';
header.classList.add('header');
header.innerHTML = '<div class="innerElement">Inner</div>';
header.setAttribute(
 "style", "font-size: 32px; font-style: bold; background-color:#ff0000; color: white; width: 100%; height: 200px; padding: 20px; font-family: sans-serif"); 
main.append(header);
}

const heroElement = () => {
    hero.textContent = 'Hero';
    hero.classList.add('hero');
    hero.innerHTML = '<div class="innerElement">Inner Element</div>';
    hero.setAttribute(
     "style", "font-size: 32px; font-style: bold; background-color:#000000; color: white; width: 100%; height: auto; padding: 20px; font-family: sans-serif"); 
    main.append(hero);
}

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

    }
    return items;
    
    }

const layOut = () => {
    const ui = headerElement() + heroElement();
}
layOut();


const addItemFunction = () => {
    const addButton = document.getElementById('addButton');
    const input = document.getElementById('input').value;
    data.push(input);    
    htmlInside(data);  
}

const removeItemFunction = (index) => {
    data.pop(data);    
    htmlInside(data);  
}

const removeSpecificItemFunction = (index) => {
// This is a one liner code to remove an element in an array, I hope you can understand. If you can't, just ask.
        (index>-1) ? data.splice(index, 1) : false;
        htmlInside(data);
}

const htmlInside = (data) => {
    let getHtml = `
    <ul>
        ${itemArray(data)}
    </ul>
    <input type='input' id="input" required></input><button type='button' id='addButton'>Add item</button><button id='removeButton'>Remove item</button>
    `
    document.querySelector('.hero').innerHTML = getHtml;

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

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

    clickedClassHandler("removeItem", function(index) {
        removeSpecificItemFunction(index);
    })
 }  

function clickedClassHandler(name,callback) {

    // 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 == name) {
            allElements[x].onclick = handleClick;
        }
    }

    function handleClick() {
        var elmParent = this.parentNode;
        var parentChilds = elmParent.childNodes;
        var index = 0;

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

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

        callback.call(this,index);
    }
}

 htmlInside(data);


const main=document.querySelector（'.app'）；
const header=document.createElement（'DIV'）；
const hero=document.createElement（'DIV'）；
const heading=document.createElement（'H1'）；
heading.textContent='heading Tag'；
（标题）前的主标题；
风险值数据=[
“星期一”，
“星期二”，
“星期三”，
“星期四”，
“星期五”，
“星期六”
];
const headerElement=（）=>{
header.textContent='header'；
header.classList.add（'header'）；
header.innerHTML='Inner'；
header.setAttribute(
“样式”，“字体大小：32px；字体样式：粗体；背景色：#ff0000；颜色：白色；宽度：100%；高度：200px；填充：20px；字体系列：无衬线”）；
main.append（表头）；
}
常量元素=（）=>{
hero.textContent='hero'；
hero.classList.add（'hero'）；
hero.innerHTML='内部元素'；
hero.setAttribute(
“样式”，“字体大小：32px；字体样式：粗体；背景色：000000；颜色：白色；宽度：100%；高度：自动；填充：20px；字体系列：无衬线”）；
main.append（英雄）；
}
常量项数组=（ele）=>{
让项目=“”；
for（设i=0；i${ele[i]}删除Item`；
}
退货项目；
}
常量布局=（）=>{
常量ui=headerElement（）+heroElement（）；
}
布局（）；
常量addItemFunction=（）=>{
const addButton=document.getElementById（'addButton'）；
常量输入=document.getElementById（'input'）。值；
数据推送（输入）；
htmlInside（数据）；
}
常量removeItemFunction=（索引）=>{
data.pop（数据）；
htmlInside（数据）；
}
常量removeSpecificItemFunction=（索引）=>{
//这是一个用于删除数组中元素的一行代码，希望您能理解。如果您不能理解，请询问。
（索引>-1）？数据拼接（索引，1）：假；
htmlInside（数据）；
}
常量htmlInside=（数据）=>{
让getHtml=`

${itemArray（数据）}

添加项删除项
`
document.querySelector（'.hero'）.innerHTML=getHtml；
addButton.addEventListener（'单击'，（）=>{
addItemFunction（）；
});
removeButton.addEventListener（'单击'，（）=>{
removeItemFunction（）；
});
clickedClassHandler（“removeItem”，函数（索引）{
removeSpecificItemFunction（索引）；
})
}  
函数clickedClassHandler（名称，回调）{
//将click处理程序应用于具有匹配类名的所有元素
var-allegements=document.body.getElementsByTagName（“*”）；
对于（var x=0，len=allegements.length；x

这是我从中学到的好方法

clickClassHandler（）为HTML标记创建一个事件处理程序，并返回该标记相对于其他同名标记的索引。
您可以使用数组方法