使用Jquery单击时删除元素

Remove element on click with Jquery

本文关键字：删除 元素 单击 Jquery 使用      更新时间：2023-09-26

我正在使用JQuery创建新的输入字段，其中包含一个移除按钮。remove按钮适用于原始元素，但不适用于使用JQuery创建的元素。

两个新的电子邮件字段添加后的文档

<fieldset>
                <legend>Send Email</legend>
                <label>Emails(s) to send notice to.</label>
                <p>
                    <input type="email" name="emails[]" style="cursor: auto; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;"><span class="btn_orange"><a href="#" class="remove_field">x</a></span>
                </p>
                <p><input type="email" name="emails[]"><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p><p><input type="email" name="emails[]"><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p><p>
                    <span class="btn_orange"><a class="add_email_button" href="#">Add Another Email</a></span>
                </p>
                <p>
                    <span class="btn_orange"><a class="ui-button">Send Email</a></span>
                </p>
            </fieldset>

编写脚本

<script type="text/javascript">
    $(document).ready(
        function () {
            $("#importbutton").click(function () {
                $("#ProgressBarImg").show();
                $.get('@Url.Action("Import", "Import")', {},
                function (data) {
                    $('body').html(data);
                    $('#ProgressBarImg').hide();
                });
                $("#importbutton").removeAttr("href");
            }
            );
            var dialog = $("#emailSection").dialog({
                autoOpen: false,
                height: 400,
                width: 475,
                modal: true
            });
            $('#emailButton').click(function () {
                $(dialog).dialog("open");
                $('#emailButton').removeAttr('href');
            });
            $('.add_email_button').closest('p').click(function () {
                var html = '<p><input type="email" name="emails[]" /><span class="btn_orange"><a href="#" class="remove_field">x</a></span></p>';
                $(html).insertBefore($(this));
            });
            $('a.remove_field').closest('p').click(function () {
                $(this).remove();
            });
        }
    );
</script>

您正在页面上最初的元素上设置一个事件。添加新元素后，新元素没有处理程序，您可以通过添加它们来添加它，但这是最好的方法。

使用事件委派：http://jsfiddle.net/mendesjuan/4my1dhw1/

$(document).on('click', 'a.remove_field', function () {
    $(this).closest('p').remove();
});

这意味着你在监听整个文档的点击，但只过滤你感兴趣的内容

第二个好处是，您不需要为每个元素单独的处理程序，从而节省内存

我发布的代码在行为上与您的不同之处在于，它要求您单击x。当您单击<p>中的任何位置时，您的代码都会被删除。我之所以更改它，是因为没有一个CSS选择器可以模仿closest('p')的功能，也就是说，CSS选择器不会出现在树上。然而，我所做的似乎更有意义，您之所以选择using closest('p')，可能只是因为您想删除整个<p>，但您可以从处理程序内部执行此操作。

对于页面加载后添加的元素，您应该使用：

 $('body').on('click', '.classSelector', function(e) {
});
相关文章：