在jquery中淡出函数时遇到麻烦

时间:2014-07-13 11:48:37

标签: javascript jquery

这是我的jquery代码,用于添加和删除动态文本框以及radiobutton

<script type="text/javascript">
    var ans = 0;
    var cnt = 1;

    $(document).ready(function () {
        $("#add").click(function () {

            //var intId = $("#abc div").length + 1;
            var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + cnt + "\"/>");

                var fType = $("<input type=\"radio\" class=\"fieldtype\" id=\"Rd" + cnt + "\" name=\"RdNm\" />");
                var fName = $("<input type=\"text\" class=\"fieldname\" id=\"Txtopt" + cnt + "\"  name=\"TxtoptNm" + cnt + "\"  />");
                var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
                removeButton.click(function () {
                    $(this).fadeOut(1000, function () {
                        $(this).parent().remove();
                    });
                });


                fieldWrapper.append(fType);
                fieldWrapper.append(fName);
                fieldWrapper.append(removeButton);
                fieldWrapper.append('<br />');
                fieldWrapper.append('<br />');

                $("#abc").append(fieldWrapper);
                $("#field" + cnt).effect("bounce", { times: 3 }, 'normal');
                //$("#Txtopt" + intId).effect("bounce", { times: 3 }, 300);
            }

            cnt = cnt + 1;

            });

        });

    </script>

删除正常运行,但只有问题是淡出效果意味着我点击

删除按钮,然后只有删除按钮淡出,但文本框和单选按钮不会淡出,但文本框和单选按钮正在删除。

如何修复此删除功能?

1 个答案:

答案 0 :(得分:0)

而不是淡出按钮并在删除父级之后,如果你想淡出整个内容,你应该完全淡出父级然后删除它。所以试试吧。

removeButton.click(function () {
    $(this).parent().fadeOut(1000, function () {
            $(this).remove();
      });
  });

Demo