时间戳

首页 > 解决方案 > html文件中的push（）元素后功能不起作用

javascript - html文件中的push（）元素后功能不起作用

问题描述

我想创建一个待办事项列表，<input type="text">当单击带有 class 的按钮时，将添加输入和删除的元素.delete。每当我将元素推送到数组中时。它在html页面中，innerHTML删除按钮停止工作。删除按钮适用于写入 Html 代码的元素。如果有人可以帮助我，我将非常感激。` 

    const itemsLIst = document.querySelector('.item-list'); // where we want to add our list
    const addText = document.querySelector('.submit');     // add button
    let deleteText = document.querySelectorAll('.delete');  // delete button
    // const list = JSON.parse(localStorage.getItem('items')) || [];
    let list = [];

    function addItem(e) {
    let text = document.querySelector('.input_bar').value; //text typed in input bar
    if (text.length != 0) {
    list.push(`<div>
        <p>${text}</p>
        <button class="delete" onclick='deleteItem'></button>
        <button class="edit">Edit</button>
        </div><hr>`);
        itemsLIst.innerHTML = list.join('');
        text = '0';
        document.getElementById("myText").value = "";
    } else {
        return;
    }
    }

    function deleteItem(e) {
        this.parentElement.style.display = 'none';
    }

    for (var i = 0 ; i < deleteText.length; i++) {
       deleteText[i].addEventListener('click', deleteItem);
    }

    addText.addEventListener('click', addItem);
       <style>
                body {
                    width: 100%;
                    height: 100vh;
                    background-color: rgb(115, 115, 197);
                    margin: 0;
                    padding: 0;
                    position: relative;
                }
                .container {
                    width:50%;
                    height:70%;
                    position: absolute;
                    background-color: rgb(241, 241, 241);
                    font-family: Arial, Helvetica, sans-serif;
                    border-bottom-left-radius: 25px;
                    border-bottom-right-radius: 25px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    overflow-y: scroll;

                }
                .heading {
                    width: 100%;
                    height: 122px;
                    background-color: #5B45B9;
                    display: flex;
                    align-items: center;
                    justify-content: center; 
                }
                .heading h1 {
                    color: white;
                    font-size: 40px;
                }
                .item-list {
                    width: 100%;
                    padding: 0 0 30px 0;
                }
                .item-list div {
                    width: auto;
                    height: 60px;
                }
                
                p {
                    width: 60%;
                    float: left;
                    font-size: 25px;
                    padding-left: 30px;
                    margin-top: 12px ;
                }
                .item-list button {
                    width: 60px;
                    height: 60px;
                    font-size: 18px;
                    float: right;
                }
                .delete {
                    font-size: 30px;
                    color: red;
                }
                .input_form {
                    width: 100%;
                    padding: 30px 0 30px 0;
                    position: absolute;
                    bottom: 0;
                    text-align: center;
                }
                .input_form .input_bar {
                    width: 80%;
                    height: 50px;
                    font-size: 18px;
                    border: none;
                }
                .input_form button {
                    width: 10%;
                    height: 50px;
                    float: right;
                    margin-right: 30px;
                }
            </style>
    <html>
        <head>
         
        </head>
        <body>
            <div class="container">
                <div class="heading">
                    <h1>TO-DO LIST</h1>
                </div>
                <div class="item-list">
                    <div>
                        <p>TEEXT2</p>
                        <button class="delete"></button>
                        <button class="edit">Edit</button>
                    </div>
                    <div>
                        <p>TEEXT1</p>
                        <button class="delete"></button>
                        <button class="edit">Edit</button>
                    </div>
                    
                    <div>
                        <p>TEEXT3</p>
                        <button class="delete"></button>
                        <button class="edit">Edit</button>
                    </div>

                    <div>
                        <p>TEEXT4</p>
                        <button class="delete"></button>
                        <button class="edit">Edit</button>
                    </div>
                </div>
                <div class="input_form">
                    <input type="text" class="input_bar" id="myText" placeholder="Add ITEM">
                    <button class="submit">+ADD ITEM</button>
                </div>
            </div>
        </body>
    </html>

<button class="delete"></button>
                    <button class="edit">Edit</button>
                </div>
                <div>
                    <p>TEEXT1</p>
                    <button class="delete"></button>
                    <button class="edit">Edit</button>
                </div>
                
                <div>
                    <p>TEEXT3</p>
                    <button class="delete"></button>
                    <button class="edit">Edit</button>
                </div>

                <div>
                    <p>TEEXT4</p>
                    <button class="delete"></button>
                    <button class="edit">Edit</button>
                </div>
            </div>
            <div class="input_form">
                <input type="text" class="input_bar" id="myText" placeholder="Add ITEM">
                <button class="submit">+ADD ITEM</button>
            </div>
            <script src="script.js"></script>
        </div>
    </body>
</html>`

标签： javascripthtmlcss

解决方案

实际上，您只使用以下行触发 DOM“原始”删除按钮（使用 HTML 代码加载的按钮）：

let deleteText = document.querySelectorAll('.delete');  // delete button

您的其他 .delete 在第一次加载 DOM 后加载，甚至没有在“deleteText”数组中列出！每次添加新项目时都必须刷​​新 deleteText。就像是 ：

    const itemsLIst = document.querySelector('.item-list'); // where we want to add our list
    const addText = document.querySelector('.submit');     // add button
    let deleteText = document.querySelectorAll('.delete');  // delete button
    // const list = JSON.parse(localStorage.getItem('items')) || [];
    let list = [];
    
    function addItem(e) {
        let text = document.querySelector('.input_bar').value; //text typed in input bar
        if (text.length != 0) {
            list.push(`<div>
                <p>${text}</p>
                <button class="delete" onclick='deleteItem'></button>
                <button class="edit">Edit</button>
                </div><hr>`);
            itemsLIst.innerHTML = list.join('');
            text = '0';
            document.getElementById("myText").value = "";
        } else {
            return;
        }
    
    
    }
    
    function deleteItem(e) {
        this.parentElement.style.display = 'none';
    }
    
    function triggerDeleteButton(){
    
        deleteText = document.querySelectorAll('.delete');  // delete button
    
        for (var i = 0 ; i < deleteText.length; i++) {
            deleteText[i].addEventListener('click', deleteItem);
        }
    }
    
    addText.addEventListener('click', function(){
addItem() ;
triggerDeleteButton() ;
}
);

推荐阅读