我想在点击提交按钮时始终删除div容器?

时间:2014-05-16 18:26:47

标签: javascript html css

我有一张表格,我正在获得价值观。像这样。

<form role="form" id="calculate">
                <div class="form-group">
                    <select class="form-control" id="paper">
                        <option value="0">Type of the Paper</option>
                        <option value="0.002252">Createspace White Paper</option>
                        <option value="0.0025">Createspace Cream Paper</option>
                        <option value="0.002347">Createspace Color-Interior Books&nbsp;&nbsp;</option>
                        <option value="0.002252">Lulu Standard</option>
                        <option value="0.00260">Lulu Standard Publisher</option>
                        <option value="0.001943"></option>
                        <option value="0.003953">135# (200gsm)</option>
                    </select>

                    <input type="text" class="form-control" id="pages" placeholder="Number of Pages">

                    <select class="form-control" id="print">
                        <option value="0">Type of Printing</option>
                        <option value="0.03937">Soft Cover</option>
                        <option value="0.07874">Paperback</option>
                        <option value="0.15748">Hard Cover</option>
                    </select>
                </div>
                <div class="calbutton"><input id="mybtn" type="button" onclick="up()"/></div>
            </form>

当用户点击按钮时,它将转到名称为up的函数。见下文。

function up(){
    var myCounter = new flipCounter('flip-counter', {value:0.000,pace:6000, auto:false});

    var print = document.getElementById("print").value; 
    //alert(print);
    var paper = document.getElementById("paper").value; 
    //alert(paper);
    var pages = document.getElementById("pages").value;
    //alert(pages);

    ans = parseFloat(paper) * parseFloat(pages) + parseFloat(print);
    var val = ans.toFixed(3);

    //alert(val);

        if(pages == ""){
        alert("Please Enter Number of Pages");

        }else{
            var x=parseFloat(val);
            //$("#flip-counter").html(x);
             //alert (x);

            var roundoff=(val*25.4).toFixed(2);
            $("#mm").html("<p class='text-center'>"+roundoff+" mm</p>");
            //alert();
            myCounter.setValue(x);
            return false;
            //document.getElementById("calculate").reset();
        //  myCounter.incrementTo(val, 2, 200);

        }

    //myCounter.setValue(1245);

}

问题在于,当我点击按钮时,它会正常工作,并将计数器值放在4个不同的un命令列表中。

当我再次点击按钮时,我将再次生成4个未订单列表,并且不会覆盖旧订单。 我希望当用户再次单击按钮时,此div再次转到原始表单并删除所有当前的未订单列表。像这样    

任何人都可以帮助我吗?我需要你的帮助,提前致谢。

1 个答案:

答案 0 :(得分:0)

在up函数的第一行中使用以下内容删除以前的无序列表。

var parentEl = $("#flip-counter").parent();
parentEl.find("#flip-counter").remove();

$('body').find("#flip-counter").remove();//this will remove the division itself

用翻转计数器分区的父元素替换$(&#39; body&#39;)。仅删除分区内使用的ul

$('body').find("#flip-counter > ul").remove();//this will remove only the ul inside the division