使用jQuery刪除元素

我想刪除一個文本框。如果我使用remove（）它只是隱藏。如果我檢查，它顯示「display：none」作爲屬性。使用jQuery刪除元素

基本上我的程序是從numberbox中獲取一個數字n創建這些許多文本框。我正在顯示所有文本框的值。將數據輸入到所有文本框後，如果我刪除其中一個文本，我不希望打印刪除文本框的數據。但我的代碼正在打印。有什麼辦法可以完全刪除文本框嗎？ 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>

來源

2016-04-07 Pooja nagaraj rao

使用'$（this）.remove（）;'因爲您已經在''LI'元素的範圍內。 –

你我知道達。但是這裏remove（）並不是完全刪除元素。相反，它將從視圖中刪除與隱藏相同的元素。我的意思是即使在刪除後數據仍然存在。 –

嘗試：

$(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/

或

$("#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/

來源

2016-04-07 05:16:28 madalinivascu

數據沒有打印 –

更新了我的回答 – madalinivascu

它沒有顯示任何數據。並且錯誤是「addrow.php：43未捕獲的TypeError：無法讀取null的屬性'值' –

的問題是在這條線：

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

的選擇是錯誤的。 $(this)已經指的是"li"，最重要的是你選擇li的父母li這是錯誤的，因此remove()不起作用。順便說一句，display:none是由於slideUp()功能。

使該行：

$(this).remove();

一個工作演示：http://jsfiddle.net/GCu2D/1186/

來源

2016-04-07 05:14:50

'$（this）.remove（）;'不起作用。它只是刪除按鈕。 –

@MdMahfuzurRahman $（this）指的是裏面的slideUp。 $（this）的範圍在函數內部發生變化。 –

@K K「demo」未打印。 –

使用此：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>

來源

2016-04-07 05:15:35

數據未打印 –

哪些數據未打印？ –

沒有數據打印..我想打印可見文本框的數據。 –

您好親愛的，現在你的代碼正在按你方的要求。請僅用此代碼替換您的代碼。 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>

來源

2016-04-07 05:32:28 Rajiv

其不顯示任何數據。錯誤是「addrow.php：43未捕獲TypeError：無法讀取null的屬性'值' –

嗨Pooja現在複製並粘貼您的代碼在我的編輯器，然後我可以做到這一點，這怎麼可能。 – Rajiv

使用jQuery刪除元素

回答

相關問題