Javascript jQuery在创建后删除元素

我正在构建一个jQuery可排序列表，用户可以在其中添加表中的项，拖动并排序和/或删除它们。我可以添加和排序没有问题，但我无法解决在添加item元素后如何删除它。我对js/jQuery比较陌生，所以我觉得这里有一些新东西需要学习，关于它是如何工作的

我将在这里省略ui.sortable内容，因为我只关心删除项目

<table>
   <tr>
    <td><a class="addrelease" href="#" cat_id="1">add</a></td>
    <td>Item 1</td>
   </tr>
    <tr>
    <td><a class="addrelease" href="#" cat_id="2">add</a></td>
    <td>Item 2</td>
   </tr>
</table>

<div id="list"></div>

<script>
$("a.addrelease").click(function (e) {
  e.preventDefault();
  cat_id     = $(this).attr('cat_id');
  remove_str = " <a href=\"#\" class=\"remove\">remove</a>";
  str        = cat_id + remove_str;
  $(str).appendTo("#list").hide().fadeIn();
});
$("a.remove").click(function (e) {
       alert("This function doesn't seem to be called");
       $(this).parent().remove(); //Doesn't happen..
});
</script>

项目1
项目2
$（“a.addrelease”）。单击（函数（e）{
e、 预防默认值（）；
cat_id=$（this.attr（'cat_id'）；
删除_str=“”；
str=cat_id+移除_str；
$（str）.appendTo（“#list”）.hide（）.fadeIn（）；
});
$（“a.remove”）。单击（函数（e）{
警报（“此函数似乎未被调用”）；
$（this）.parent（）.remove（）；//不发生。。
});

我猜javascript无法识别新生成的项，但我不确定，所以我不确定从哪里开始修复它

---

干杯

您应该使用live功能将事件附加到动态添加的元素

尝试将单击事件绑定到。删除元素：

$("a.remove").live("click", function (e) {
       alert("This function doesn't seem to be called");
       $(this).parent().remove(); //Doesn't happen..
});

---

应该使用live函数将事件附加到动态添加的元素

尝试将单击事件绑定到。删除元素：

$("a.remove").live("click", function (e) {
       alert("This function doesn't seem to be called");
       $(this).parent().remove(); //Doesn't happen..
});

---

以下是我认为您应该如何修改代码的答案：

项目1
项目2
$（“a.addrelease”）。单击（函数（e）{
e、 预防默认值（）；
var catId=$（this.attr（'rel'）；
var itemName=$（this.closest（'td'）.next（'td'）.text（）；
var newItem=''+catId+''+itemName+''；
$（newItem）.appendTo（'#list'）.hide（）.fadeIn（）；
});
$（“a.remove”）.live（'click'，函数（e）{
$（this.parent（'p'）.remove（）；
});

• 将

  cat_1

  ，

  cat_2

  用作HTML属性是无效的。如果需要将特定值与项目关联，可以使用

  rel

  属性
• 使用

  live（）

  方法将

  单击事件处理程序自动附加到动态创建的项目

---

以下是我对您应该如何修改代码的回答：


项目1
项目2
$（“a.addrelease”）。单击（函数（e）{
e、 预防默认值（）；
var catId=$（this.attr（'rel'）；
var itemName=$（this.closest（'td'）.next（'td'）.text（）；
var newItem=''+catId+''+itemName+''；
$（newItem）.appendTo（'#list'）.hide（）.fadeIn（）；
});
$（“a.remove”）.live（'click'，函数（e）{
$（this.parent（'p'）.remove（）；
});

• 将

  cat_1

  ，

  cat_2

  用作HTML属性是无效的。如果需要将特定值与项目关联，可以使用

  rel

  属性
• 使用

  live（）

  方法将

  单击事件处理程序自动附加到动态创建的项目

---

你完全正确，javascript不会识别新项目
jQuery选择器通常只与文档中当前的元素匹配。当您使用$（“a.remove”）.function（）时，jQuery会构建一个匹配“a.remove”的节点列表，然后对每个节点调用function（）
.live（）函数是一个特殊的函数，它不直接将事件附加到元素，而是对冒泡到DOM顶部的事件进行求值，以查看它们是否与选择器匹配
IMHO，最好的方法是在创建新列表条目时绑定remove处理程序：

  str        = cat_id + remove_str;
  var remove = $(str);
  remove.appendTo("#list").hide().fadeIn();
  remove.click(function(e) { .... })

---

免责声明：深夜打字&未经测试
你完全正确，javascript不会识别新项目
jQuery选择器通常只与文档中当前的元素匹配。当您使用$（“a.remove”）.function（）时，jQuery会构建一个匹配“a.remove”的节点列表，然后对每个节点调用function（）
.live（）函数是一个特殊的函数，它不直接将事件附加到元素，而是对冒泡到DOM顶部的事件进行求值，以查看它们是否与选择器匹配
IMHO，最好的方法是在创建新列表条目时绑定remove处理程序：

  str        = cat_id + remove_str;
  var remove = $(str);
  remove.appendTo("#list").hide().fadeIn();
  remove.click(function(e) { .... })

---

免责声明：深夜打字&未经测试
啊，太好了！这就是诀窍！哇，我不知道要花多长时间才能找到解决方案！谢谢，我认为您也应该替换

$（this.parent（）.remove（）由
$（this.remove（）
否则整个
div
将被删除。哦，是的，你是对的-我忘记编辑该位了。生成的元素应该是这样的：
Item 1
Ah great！这就是诀窍！哇，我不知道要花多长时间才能找到解决方案！谢谢，我认为您也应该替换
$（this.parent（）.remove（）由
$（this.remove（）
否则整个
div
将被删除。哦，是的，你是对的-我忘记编辑该位了。生成的元素应如下所示：
Item 1