Question

我目前正在执行jQuery的第一步，并遇到.remove()的问题。有类似问题的人已经提出了很多问题，但他们没有帮助我。

在HTML文件中，我有一个表单和以下div作为警告框，并显示表单是否正确验证。在原始状态下，div包含一个用于关闭它的按钮。

<div id="my-form-alert-box">
    <button id="my-form-alert-button" type="button" class="close">x</button>
</div>

首次加载HTML页面时，不应显示警告框。这就是我添加以下CSS的原因：

<style type="text/css">
    #my-form-alert-box {display: none;}
</style>

在提交并验证表单后，我会将some text附加到此div，然后会显示警告框。当我使用按钮关闭警告框时，它会消失但some text不会被删除。为什么会这样？

这是我的jQuery代码：

$(document).ready(function() {

    var $myFormAlertBox = $('#my-form-alert-box');
    var $myFormAlertBoxParagraph = $('#my-form-alert-box p');

    $('#my-form-alert-button').on('click', function(event) {

        $myFormAlertBoxParagraph.remove();
        $myFormAlertBox.hide();

    });

    $('#my-form').on('submit', function(event) {

        $.ajax({
            // ...
            success: function(data) {

                // The content of the alert box should be removed
                // and the alert box itself should be hidden also when
                // the form gets submitted again and not only when the
                // button is clicked
                $myFormAlertBoxParagraph.remove();
                $myFormAlertBox.hide();

                // data contains <p>some text</p>
                $myFormAlertBox.append(data).show(); 
            }

        });

        event.preventDefault();

    });        

});

附加数据工作正常，但删除数据却没有。你能帮助我吗？非常感谢你！

Answer 1

我认为您的选择器在更新内容之前正在运行。选择器只能在最初运行时查看其中的内容。

Answer 2

$ myFormAlertBoxParagraph的初始分配将失败，因为调用时标记中没有段落。在标记中添加“占位符”段落应修复它。这解释了.remove（）失败的原因。

对于你的ajax，尝试这样的方法来保持变量的新值：

//...
$.ajax({
    // ...
    success: function(data) {
        // Remove the existing paragraph.
        $myFormAlertBoxParagraph.remove();

        // This updates the paragraph object with the new one.
        $myFormAlertBoxParagraph = $(data);

        // Add the new paragraph and ensure the alert box is visible.
        $myFormAlertBox.append($myFormAlertBoxParagraph).show();
    }
});
//...

这将从警告框中删除段落标记，并添加新标记。没有必要.hide（）然后立即。显示（）之后。但是，在.append（）之后添加.show（）将覆盖您，如果它已被您的点击事件隐藏。

Answer 3

jQuery对象不是实时的。在添加之前，先创建$ myFormAlertBoxParagraph对象。所以这个对象是空的，将永远是空的，因为你永远不会重新分配它。

为什么.remove（）在我的设置中不起作用？

3 个答案: