delete an element using jQuery

I want to delete a textbox. If I use remove() it is just hiding.If i inspect, it is displaying "display:none" as attribute.

Basically my program is fetching a number from the numberbox n creating those many textboxes. and I am displaying the values of all text boxes. After entering data into all the textboxes, if I delete one of them n print, i dont want the data of the deleted text box to print. But my code is printing that. Is there any way to remove the textbox completely? remove() is not working as i expected here.

Here is my code

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var i=1;
        var id=1,text;
//      text = '<li><input id="input_'+id+'" type="text"/> <button class="btn2">-</button> </li>';

        $("#ok").click(function(){
            var number = document.getElementById("num").value;
            //alert(number);
            for(var $j=i; $j<= number; $j++){
                text = '<li><input id="input_'+id+'" type="text"/> <button class="btn2">-</button> </li>';
                $("ol").append(text);
                id++;i++;
            }

        });

        $("#btn1").click(function(){
            text = '<li ><input id="input_'+id+'" type="text"/> <button class="btn2">-</button> </li>';
            $("ol").append(text);
            id++;i++;
        });

        $('.divi').on('click','.btn2',function(){
          $(this).parents("li").slideUp('medium',function(){
                $(this).parents("li").remove();
                i--;
            });     
        }); 

        $("#btnprint").click(function(){
            var number = document.getElementById("num").value;
            var msg="";
            for(var j=1; j<=number; j++){
                msg+=document.getElementById("input_" +j).value + "<br/>";
            }
            document.getElementById("printdiv").innerHTML=msg;
        });

    });
</script>
</head>

<body>
    <input type="number" id="num" autofocus="true"></input>
    <button id="ok">OK</button>
    <br/><br/>
    <button id="btn1">+</button>

    <div class="divi">
        <ol>
        </ol>
    </div>

    <button id="btnprint" >Print Data</button>
    <div id="printdiv"></div>

</body>

</html>

Answers 1

  • Hello Dear now your code is working as per as your requirement. Please only replace your code with this code. Written Here....

    <!DOCTYPE html>
    <html>
        <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>         
            <script>
                $(document).ready(function() {
                    var i = 1;
                    var id = 1, text;
                    //      text = '<li><input id="input_'+id+'" type="text"/>      <button class="btn2">-</button> </li>';
    
                    $("#ok").click(function() {
                        var number = document.getElementById("num").value;
                        //alert(number);
                        for (var $j = i; $j <= number; $j++) {
                            text = '<li><input id="input_' + id + '" type="text"/> <button class="btn2">-</button> </li>';
                            $("ol").append(text);
                            id++;
                            i++;
                        }
    
                    });
    
                    $("#btn1").click(function() {
                        text = '<li ><input id="input_' + id + '" type="text"/> <button class="btn2">-</button> </li>';
                        $("ol").append(text);
                        id++;
                        i++;
                    });
    
                    $('.divi').on('click', '.btn2', function() {
                        var tempIndx = $(this).parent().index();
                        $(this).parents("li").slideUp('medium', function() {
                            $('.divi ol').find("li").eq(tempIndx).remove();
                            i--;
                        });
                    });
    
                    $("#btnprint").click(function() {
                        var number = document.getElementById("num").value;
                        var msg = "";
                        for (var j = 1; j <= number; j++) {
                            msg += document.getElementById("input_" + j).value + "<br/>";
                        }
                        document.getElementById("printdiv").innerHTML = msg;
                    });
    
                });
            </script>
        </head>
    
        <body>
            <input type="number" id="num" autofocus="true">
            </input>
            <button id="ok">
                OK
            </button>
            <br/>
            <br/>
            <button id="btn1">
                +
            </button>
    
            <div class="divi">
                <ol></ol>
            </div>
    
            <button id="btnprint" >
                Print Data
            </button>
            <div id="printdiv"></div>
    
        </body>
    
    </html>
    

Related Articles