求助：实现点击文本添加删除线及列表CSS布局问题

问题1：点击文本添加删除线功能失效 #

原代码存在几个核心问题：

• 创建<li>时错误使用HTML转义字符</>，导致DOM结构嵌套混乱
• 每次提交表单都给所有<li>重复绑定点击事件，造成冗余操作
• 未定义.riscado类的样式，反而错误地给<ul>整体添加了删除线

修改后的JS代码 #

$(document).ready(function() {
  // 用事件委托绑定点击，支持动态新增的li元素，避免重复绑定
  $('ul').on('click', 'li', function() {
    $(this).toggleClass("riscado"); // toggleClass实现点击切换删除线状态
  });

  $('form').on('submit', function(e) {
    e.preventDefault();
    const listaDeTarefa = $('#lista-de-tarefa').val().trim();
    if (!listaDeTarefa) return; // 过滤空内容

    // 直接创建正确的li元素并插入到ul中
    const novoItem = $(`<li>${listaDeTarefa}</li>`);
    novoItem.appendTo('ul');
    
    $('#lista-de-tarefa').val("");
  });
});

补充对应CSS样式 #

/* 移除原ul的line-through样式，添加点击后的删除线类 */
.riscado {
  text-decoration: line-through;
}

问题2：列表置于表单外边距之外 #

只需给列表容器或<ul>添加上外边距，让它与表单拉开距离：

.lista ul {
  margin-top: 20px; /* 可根据需求调整间距大小 */
}

完整修改后的代码 #

CSS（main.css） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

.container {
  margin: 100px auto;
  max-width: 640px;
  width: 100%;
}

form {
  margin-top: 40px;
}

input,
textarea,
button {
  display: block;
  padding: 8px;
  margin-bottom: 8px;
  width: 100%;
  resize: none;
}

button {
  background-color: #2e9ccc;
  border: none;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  font-style: italic;
  cursor: pointer;
}

button:hover {
  background-color: #18a9e9;
}

input:focus,
textarea:focus {
  outline-color: #18a9e9;
}

/* 点击添加删除线的样式 */
.riscado {
  text-decoration: line-through;
}

/* 列表与表单的间距 */
.lista ul {
  margin-top: 20px;
}

JS（main.js） #

$(document).ready(function() {
  // 事件委托绑定li点击事件
  $('ul').on('click', 'li', function() {
    $(this).toggleClass("riscado");
  });

  $('form').on('submit', function(e) {
    e.preventDefault();
    const listaDeTarefa = $('#lista-de-tarefa').val().trim();
    if (!listaDeTarefa) return;

    const novoItem = $(`<li>${listaDeTarefa}</li>`);
    novoItem.appendTo('ul');
    
    $('#lista-de-tarefa').val("");
  });
});

HTML保持原结构即可 #

内容的提问来源于stack exchange，提问作者Adelson Siqueira