使用jQuery删除元素_Jquery - Fatal编程技术网

使用jQuery删除元素

jquery

使用jQuery删除元素,jquery,Jquery,我想删除一个文本框。如果我使用remove（），它只是隐藏。如果我检查，它会显示“display:none”作为属性基本上，我的程序是从NumberBoxN中提取一个数字，创建许多文本框。我正在显示所有文本框的值。在所有文本框中输入数据后，如果我删除其中一个并打印，我不希望打印已删除文本框的数据。但我的代码正在打印它。有没有办法完全删除文本框？remove（）没有像我在这里预期的那样工作这是我的密码 <!DOCTYPE html> <html> <head&g

我想删除一个文本框。如果我使用remove（），它只是隐藏。如果我检查，它会显示“display:none”作为属性

基本上，我的程序是从NumberBoxN中提取一个数字，创建许多文本框。我正在显示所有文本框的值。在所有文本框中输入数据后，如果我删除其中一个并打印，我不希望打印已删除文本框的数据。但我的代码正在打印它。有没有办法完全删除文本框？remove（）没有像我在这里预期的那样工作

这是我的密码

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


$（文档）.ready（函数（）{
var i=1；
var id=1，文本；
//text='-'；
$（“#确定”）。单击（函数（）{
var number=document.getElementById（“num”）.value；
//警报（编号）；
对于（var$j=i；$j问题如下：
$(this).parents("li").remove();

选择器错误。$（此）
已经引用了“li”
，除此之外，您正在选择li
的父项，这是错误的，因此remove（）
不起作用。顺便说一句，display:none
是由于slideUp（）
函数造成的
那句话：
$(this).remove();

工作演示：
使用以下方法：

$（文档）.ready（函数（）{
var i=1；
var id=1，文本；
//text='-'；
$（“#确定”）。单击（函数（）{
var number=document.getElementById（“num”）.value；
//警报（编号）；
对于（var$j=i；$j尝试：
$（文档）.ready（函数（）{
$（文档）.ready（函数（）{
var i=1；
变量id=1，
文本；
//text='-'；
$（“#确定”）。单击（函数（）{
var number=document.getElementById（“num”）.value；
//警报（编号）；
对于（var$j=i；$j您好，亲爱的，现在您的代码正按照您的要求工作。
请仅用此代码替换您的代码。
写在这里
<!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>


$（文档）.ready（函数（）{
var i=1；
var id=1，文本；
//text='-'；
$（“#确定”）。单击（函数（）{
var number=document.getElementById（“num”）.value；
//警报（编号）；
对于（var$j=i；$j使用$（this）.remove（）；
因为您已经在LI
元素的范围内。我知道。但是这里remove（）并不是完全删除元素。相反，它是从视图中删除元素，这与隐藏相同。我的意思是，即使删除后数据仍然存在。$（this）.remove（）；不起作用。它只是删除了按钮。@MdMahfuzurRahman$（此）引用了slideUp中的li。$（此）的作用域在函数中发生了变化。@K“demo”不是打印。@Poojanagarajrao演示只是向您展示删除部分，我相信这就是您所在的位置stuck@KK删除是可以的..但是我不希望被删除元素的数据被打印数据没有得到打印编辑没有显示任何数据。错误是“addrow.php:43 Uncaught TypeError:无法读取null的属性'value'或者，如果您没有在第一个输入字段中使用计数器编号，谢谢@madalin ivascu，它几乎完成了..但未定义的数据正在显示。我将尝试解决此问题。主要部分已完成。thanqjsidle.net/sxjL4t62工作完全正常thanqData未打印哪些数据未打印？未打印任何数据..我想要要打印的可见文本框。它不显示任何数据。错误是“addrow.php:43 Uncaught TypeError:无法读取null的属性'value'”Hi Pooja立即复制并粘贴您的代码到我的编辑器上，然后我可以这样做。这怎么可能呢。
$(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);
});

  });

});

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

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