Javascript 如何在使用JQuery动态创建dom元素后隐藏它？

我正在尝试构建一个表单，用户可以通过单击“添加选项”按钮添加文本字段。他们还可以通过Jquery动态创建的“删除选项”链接删除添加的字段，以及文本字段

JavaScript:

$(document).ready(function(){
    $("#add_option").click(function()
      {
        var form = $("form");
        var input_field = '<input type="text" />';
        var delete_link = '<a href="#">remove</a>';
        form.append(input_field + delete_link);

        return false;
    });

    $("a").click(function()
    {
        alert('clicked');
        return false;
    });
});

$（文档）.ready（函数（）{
$（“#添加_选项”）。单击（函数（）
{
变量形式=$（“形式”）；
变量输入_字段=“”；
var delete_link=''；
表单追加（输入\字段+删除\链接）；
返回false；
});
$（“a”）。单击（函数（）
{
警报（“点击”）；
返回false；
});
});

当我点击“添加选项”按钮时，会出现一个新的文本字段和“删除链接”。但是，当单击JQuery创建的“delete_链接”时，浏览器会跟随该链接，而不是启动一个显示“clicked”的弹出窗口

---

使用JQuery动态创建dom元素后，如何隐藏它？

尝试将

的处理程序绑定为“live”

---

您可能应该用类或其他东西限定那些

链接。

我会使用委托，因为它使用较少的冒泡：

$(document).delegate("a", "click", function(){
 alert('clicked');
});

编辑，以下是您需要更改的代码：

$(document).ready(function(){
       $("#add_option").click(function(){
               var form = $("form");
               var input_field = '<input type="text" />';
               input_field.addClass = "dynamic-texfield";
               var delete_link = '<a href="#" class="delete-trigger">remove</a>';
               form.append(input_field + delete_link);

               return false;
           });

---

我不明白为什么要在jQuery中使用

按钮来执行函数。在框架中，您拥有所需的所有工具，可以完全绕过陈旧的HTML传统

只需将css

cursor:pointer

definition放在您希望显示为“可点击”的按钮上，根据您的喜好添加一些文本装饰，然后使用jQ定义您的函数：

$('.remove-button').live('click', function() {
    $(this).parent().remove();
}

---

我不知道委托函数，我对Jquery编程还很陌生。谢谢，它解决了我的问题！

$(document).delegate(".delete-trigger", "click", function(){
     alert('ready to delete textfield with class' + $(".dynamic-texfield").attr("class"));
});

$('.remove-button').live('click', function() {
    $(this).parent().remove();
}