Question

我想删除一个文本框。如果我使用remove（）它只是隐藏。如果我检查，它显示＆＃34;显示：无＆＃34;作为属性。

基本上我的程序是从数字框中获取一个数字来创建那么多文本框。我正在显示所有文本框的值。将数据输入所有文本框后，如果我删除其中一个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>

Answer 1

问题出在这一行：

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

选择器错误。 $(this)已经引用"li"，而且您选择的li父母li是错误的，因此remove()不起作用。顺便说一下，display:none是由slideUp()函数引起的。

制作该行：

$(this).remove();

正在运行的演示： http://jsfiddle.net/GCu2D/1186/

Answer 2

尝试：

for card in cards {
    cardsInCompartment[card.compartment - 1] += 1
    print(cardsInCompartment[card.compartment - 1])
}

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

或

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

Answer 3

使用此：See Demo

child-component

Answer 4

您好亲爱的，现在您的代码正在按照您的要求运行。请仅使用此代码替换您的代码。写在这里......

<% if @question.persisted? %> 
  <div class="form-group">
     <div class="field">
      <%= f.label :Game_Number %><br>
      <%= f.number_field :category_id, :value => 7, class: "form-control" %>
    </div>
  </div>
<% else %> 
    <div class="form-group">
     <div class="field">
      <%= f.label :Game_Number %><br>
      <%= f.number_field :category_id, :value => params[:id].to_i, class: "form-control" %>
    </div>
  </div>

<% end %>

使用jQuery删除元素

4 个答案: