delete an element using jQuery

Question

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>

Use $(this).remove(); cause you're already in the scope of your LI element. — Roko C. Buljan
– Roko C. Buljan, Commented Apr 7, 2016 at 5:16
ya I know tat. But here remove() is not completely removing the element. Instead it is removing the element from the view which is same as hiding. I meant the data is still present even after removing. — Pooja nagaraj rao
– Pooja nagaraj rao, Commented Apr 7, 2016 at 5:18

K K · Accepted Answer · 2016-04-07 05:14:50Z

2

The issue is in this line:

$(this).parents("li").remove();

The selector is wrong. $(this) already refers to "li" and on top of that you are selecting li parents of li which is wrong, hence remove() doesn't work. BTW, display:none is due to the slideUp() function.

Make that line:

$(this).remove();

A working demo: http://jsfiddle.net/GCu2D/1186/

answered Apr 7, 2016 at 5:14

K K

18.2k4 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Md Mahfuzur Rahman Over a year ago

$(this).remove(); doesn't work. It just remove the button.

K K Over a year ago

@MdMahfuzurRahman $(this) refers to li inside the slideUp. Scope of $(this) changes inside the function.

Pooja nagaraj rao Over a year ago

@K K "demo" isn't printing.

K K Over a year ago

@Poojanagarajrao Demo is just to show you the delete part, I believe this is where you were stuck

Pooja nagaraj rao Over a year ago

@K K deleting is ok.. but I dont want the data of the deleted element to be printed

|

madalinivascu · Accepted Answer · 2016-04-07 05:41:54Z

1

try:

$(document).ready(function() {
  $(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).parent().slideUp('medium',function(){
                $(this).remove();
                i--;
            });
    });

     $("#btnprint").click(function() {
  var number = $("#num").val();
  var msg = "";
  for (var j = 1; j <= number; j++) {
    msg += $('ol li').eq(j-1).find('input[id^="input_"]').val() + "<br/>";
  }
  $("#printdiv").html(msg);
});

  });

});

http://jsfiddle.net/GCu2D/1187/

or

  $("#btnprint").click(function() {
      var number = $("#num").val();
      var msg = "";
      $('input[id^="input_"]').each(function(){
        msg += $(this).val() + "<br/>";
      });
      $("#printdiv").html(msg);
    });

http://jsfiddle.net/sxjL4t62/

edited Apr 7, 2016 at 5:41

answered Apr 7, 2016 at 5:16

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

5 Comments

Pooja nagaraj rao Over a year ago

Data isn't getting printed

Pooja nagaraj rao Over a year ago

its not displaying any data. And the error is "addrow.php:43 Uncaught TypeError: Cannot read property 'value' of null"

madalinivascu Over a year ago

or jsfiddle.net/sxjL4t62 if you don't use the counter number in the first input field

Pooja nagaraj rao Over a year ago

thank you @madalin ivascu its almost done.. but the data undefined is displaying. I'll try solving that. Major part is done. Thanq

Pooja nagaraj rao Over a year ago

jsfiddle.net/sxjL4t62 is working completely fine thanq

Md Mahfuzur Rahman · Accepted Answer · 2016-04-07 05:37:27Z

0

Use this: See Demo

    <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).remove();
             i--;
          });
       });

         $("#btnprint").click(function(){ 
            var number = $(".divi ol li").length;

            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>

edited Apr 7, 2016 at 5:37

answered Apr 7, 2016 at 5:15

Md Mahfuzur Rahman

2,3693 gold badges20 silver badges29 bronze badges

3 Comments

Pooja nagaraj rao Over a year ago

Data isn't getting printed

Md Mahfuzur Rahman Over a year ago

Which data is not getting printed ?

Pooja nagaraj rao Over a year ago

no data is printed.. I want the data of the visible textboxes to be printed.

Rajiv · Accepted Answer · 2016-04-07 05:44:41Z

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>

its not displaying any data. And the error is "addrow.php:43 Uncaught TypeError: Cannot read property 'value' of null"
Hi Pooja right now copy and paste your code on my editor then i can do it how can this possible.

Collectives™ on Stack Overflow

delete an element using jQuery

4 Answers 4

7 Comments

5 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

5 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related