时间戳

首页 > 解决方案 > 使用jquery删除动态元素

javascript - 使用jquery删除动态元素

问题描述

最近我尝试创建动态元素并尝试删除它们。问题是，每次我想删除特定元素时，删除的元素是第一个创建的元素。我也已经尝试过使用live()和on()方法。知道为什么会这样吗？感谢帮助

<body>
<h2>To Do List</h2>
<div id="inputfield">
    <input type="text" placeholder="add here" id="input">
    <button onclick="addlist()">Add</button>
</div>
<div id="content">
</div>

addlist = () => {
    let input = document.getElementById("input").value;
    let html = '';
    html += `<div style="display: flex; justify-content: center; flex-direction: row" class="main">
                <div id="list">
                    <span id="isilist">` + input + `</span>
                </div>
                <div id="option">
                    <button id="deletebtn">delete</button>
                </div>
            </div>`
    $("#content").append(html)
}

$("#content").on('click', 'button', function(){
    $("#list").remove()
    $("#option").remove()
})

或者你可以在https://jsfiddle.net/tLd3kvyo/上试试

标签： javascripthtmljquery

解决方案

问题是每次您创建一个新元素时，它们都有相同的 id="list" 因此当您尝试删除它时，浏览器不知道您指的是哪个 id("#list") 并因此删除了第一。因此，
请将您的删除代码更改为：

$("#content").on('click', 'button', function(){
    $(this).parent().prev().remove();
    $(this).parent().remove();
})

这也将删除按钮的父元素和前一个元素。

推荐阅读