Question

在进行remove item列表项目时，我用js代码制作了to-do按钮。

删除先前在代码编辑器中进行的项目效果很好。 *so in browser preview, I typed and added "new To-do" item to list.* 但是删除“新的待办事项”项目无效。即使chrome Devtool也没有显示错误。新项目的标记和className都是正确的。

p.s：不必担心'X'或X图标。我跳过了上传。

[HTML]

<ul id="listUl">
    <li>Meet George <span class="remove"></span></li>
    <li>Pay Bills <span class="remove"></span></li>
    <li>new To-do <span class="remove"></span></li>
</ul>

[JS]-移除零件。

var remove = document.getElementsByClassName('remove');

for (var i = 0; i < remove.length; i++) {
    remove[i].onclick = function() {
        var target = document.getElementById('listUl');
        target.removeChild(this.parentElement);
    }
}

Answer 1

这是因为您添加的每个新项目都没有监听器（b）。因此，当您单击它们时，什么也不会发生。您需要将from sqlalchemy import create_engine from snowflake.sqlalchemy import URL from shutil import copy import pandas as pd import xlsxwriter as xw import glob import smtplib import sys import os import datetime import json from cryptography.fernet import Fernet key_file = './config/key.txt' config_file = './config/encrypted' snowpass = open("C:/Users/z476026/OneDrive - US Foods/Documents/SnowflakePassPy.txt", "r") password = snowpass.read() def check(): with open(key_file, 'rb') as k: key = k.read() with open(config_file, 'rb') as f: data = f.read() fernet = Fernet(key) decrypted = fernet.decrypt(data) config = json.loads(decrypted) engine = create_engine( URL(account='XXXX', user='XXXX', password= password, database='XXXX', schema='XXXX', warehouse='XXXX', role='XXXXX', numpy=True)) staging_directory = open("G:/Logistics/Logistics Data Central/Admin/txt import/Secondary PFV Setups.csv") output_directory = 'G:\Logistics\Admin\Drop_Box\Snowflake' query = """Select PROD.div_nbr, PROD.prod_nbr, PROD.MFR_PROD_NBR, PROD.PRCH_FROM_VNDR_NBR, PROD.SCND_PRCH_FROM_VNDR_NBR_1, PROD.SCND_PRCH_FROM_VNDR_NBR_2, PROD.SCND_PRCH_FROM_VNDR_NBR_3 from gold.xdmadm.prod_corp PROD where prod.inact_dt is null and PROD.SCND_PRCH_FROM_VNDR_NBR_1 > 0 group by PROD.div_nbr, PROD.prod_nbr, PROD.MFR_PROD_NBR, PROD.PRCH_FROM_VNDR_NBR, PROD.SCND_PRCH_FROM_VNDR_NBR_1, PROD.SCND_PRCH_FROM_VNDR_NBR_2, PROD.SCND_PRCH_FROM_VNDR_NBR_3;""" connection = engine.connect() # Create a Pandas dataframe from the data. df = pd.DataFrame({'Data': [query]}) OutputDataSet = df # Create a Pandas Excel writer using XlsxWriter as the engine. writer = pd.ExcelWriter('pandas_simple.xlsx', engine='xlsxwriter') # Convert the dataframe to an XlsxWriter Excel object. df.to_excel(writer, sheet_name='Sheet1') # Close the Pandas Excel writer and output the Excel file. writer.save()侦听器添加到每个新项目中，就像对初始项目所做的那样。

Answer 2

我重写了您的代码：

现在仅向<ul>父元素分配了一个（委托的）事件，该事件仅在单击具有class =“ remove”的元素时才触发。在那种情况下，它是<span>元素，我还通过在其中添加一个“ X”使它更加可见。正确，当操作发生时，我必须上两个级别，直到到达要删除的实际元素的父元素：<li>元素。

var i=3,UL=document.querySelector('#listUl');
UL.addEventListener('click',function(ev){
  //   ev.target                       - this element was clicked on
  if (ev.target.classList.contains('remove'))
    // ev.target.parentNode            - this must be the <li> element
    // ev.target.parentNode.parentNode - and this is the <ul> element 
    ev.target.parentNode.parentNode.removeChild(ev.target.parentNode);
})
document.querySelector('#addTask').addEventListener('click',
function(){UL.innerHTML+='<li>and task no. '+(++i)+'... <span class="remove">X</span></li>'})

<button id="addTask">add another task</button>
<ul id="listUl">
<li>Meet George <span class="remove">X</span></li>
<li>Pay Bills <span class="remove">X</span></li>
<li>new To-do <span class="remove">X</span></li>
</ul>

“添加”按钮演示了新创建的<li>也如何响应“删除”跨度上的点击。

Answer 3

将onClick侦听器添加到ul标签。检查

    if(e.target && e.target.nodeName == "LI") {
            //Your code here
    }

Answer 4

看起来JS代码仅向页面加载时已经存在的这些待办事项添加了删除功能。如果仅在页面加载时执行一次js，则新添加的待办事项将不会附加APP_ROOT/priv/static/nuxtapp/_nuxt/<hash>.js回调函数。

这里的解决方法是每次创建TODO元素时都附加回调函数。

Answer 5

您新（动态）添加的DOM元素没有附加事件监听器，因为在页面加载时，您仅迭代（循环）了当前可用的元素，因此您可以尝试以下方法（阅读关于Event Delegation）：

document.getElementById('listUl').addEventListener('click', function(e) {
    if (e.target.nodeName == 'LI') {
    	e.target.parentNode.removeChild(e.target);
    }
});

<ul id="listUl">
  <li>Meet George <span class="remove">X</span></li>
  <li>Pay Bills <span class="remove">X</span></li>
  <li>new To-do <span class="remove">X</span></li>
</ul>

Answer 6

如果您将jquery添加到页面中，则可以像

output: html_notebook

$('#listUl').on('click', 'span.remove', function() {
  $(this).parent().remove();
});

$('.add').click(function() {
  $("#listUl").append("<li>Whatever Content <span class='remove'>x</span</li>");
});

用Javascript列出清单：无法删除项目

6 个答案: