Javascript 我想在单击“提交”按钮时始终删除div容器？_Javascript_Html_Css

Javascript 我想在单击“提交”按钮时始终删除div容器？

javascript html css

Javascript 我想在单击“提交”按钮时始终删除div容器？,javascript,html,css,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&

我有一个表格，从我得到的价值。像这样

<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>


纸张类型
Createspace白皮书
Createspace奶油纸
Createspace彩色室内书籍
露露标准
露露标准出版社
135#（200gsm）
印刷类型
软盖
平装本
精装本

当用户单击按钮时，它将转到名为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);

}

function up（）{
var myCounter=new flipCounter（'flip-counter'，{value:0.000，pace:6000，auto:false}）；
var print=document.getElementById（“print”）.value；
//警报（打印）；
var paper=document.getElementById（“paper”）.value；
//警报（纸张）；
var pages=document.getElementById（“pages”）.value；
//警报（页）；
ans=parseFloat（纸）*parseFloat（页）+parseFloat（打印）；
var val=ans.toFixed（3）；
//警报（val）；
如果（页面==“”）{
警报（“请输入页数”）；
}否则{
var x=解析浮点（val）；
//$（“#翻转计数器”）.html（x）；
//警报（x）；
var舍入=（val*25.4）。toFixed（2）；
$（“#mm”）.html（“”+roundoff+“mm”）；
//警惕（）；
myCounter.setValue（x）；
返回false；
//document.getElementById（“计算”）.reset（）；
//myCounter.incrementTo（val，2200）；
}
//myCounter.setValue（1245）；
}

问题是，当我单击按钮时，它将正常工作，并将计数器值放在4个不同的un订单列表中的这个div中

当我再次单击按钮时，我将再次生成4个以上的联合国订单列表，并且不会覆盖旧的列表。我希望当用户再次点击按钮时，这个div再次回到原来的形式，并删除所有当前的联合国订单列表。这样地

有人能帮我吗？我需要您的帮助，提前谢谢。

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

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

或

将$（'body'）替换为翻转计数器分区的父元素。若要仅删除分区中存在的ul，请使用

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

您可以设置一个JSFIDLE来突出显示这个问题吗？这将使工作更容易。当我单击按钮时，它们会显示此结构中的计数器值。当我单击按钮时，它们会显示此结构中的计数器值