Question

我是jquery的初学者，目前我正在尝试创建一个程序，允许用户添加两个文本框和一个单击按钮的复选框。

要删除这些文本框，他们应该能够选中相应的复选框并单击按钮以删除复选框。

在线搜索各种教程后，我已经能够动态添加这些元素，但我无法弄清楚如何删除它们。

这是我的代码：

<!DOCTYPE html>
<html>

<head>

  <script type="text/javascript" src="jquery-1.11.1.js"></script>

  <style type="text/css">
    div {
      padding: 8px;
      float: left;
    }
  </style>

</head>

<body>
  <script type="text/javascript">
    $(document).ready(function () {

      var counter = 2;

      $("#addButton").click(function () {

        if (counter > 10000000) {
          alert("Exceeded Text Box Limit");
          return false;
        }

        var newTextBoxDiv = $(document.createElement('div'))
          .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<label>Title #' + counter + ' : </label>' +
          '<input type="text" name="title' + counter +
          '" id="title' + counter + '" value="" >');

        var newRextBoxDiv = $(document.createElement('div'))
          .attr("id", 'RextBoxDiv' + counter);

        newRextBoxDiv.after().html('<label>Text #' + counter + ' : </label>' +
          '<input type="text" name="text' + counter +
          '" id="text' + counter + '"value="" >');

        $('#TextBoxesGroup')
          .append(
            $(document.createElement('input')).attr({
              id: 'myCheckbox' + counter,
              name: 'myCheckbox' + counter,
              value: 'myValue',
              type: 'checkbox'
            })
          );

        newTextBoxDiv.appendTo("#TextBoxesGroup");
        newRextBoxDiv.appendTo("#TextBoxesGroup");

        counter++;
      });

      $("#removeButton").click(function () {
        if (counter == 2) {
          alert("Can't remove any more textboxes");
          return false;
        }

        counter--;

        $("#TextBoxDiv" + counter).remove();
        $("#RextBoxDiv" + counter).remove();

      });

    });
  </script>
  </head>

  <body>

    <div id='TextBoxesGroup'>
      <div id="TextBoxDiv1">
        <label>Title :</label>
        <input type="text" id="title1">
        <label>Text :</label>
        <input type="text" id="text">
        <input type="checkbox" name="checkbox" id="checkbox">
        <input type="button" value="Add Button" id="addButton">
        <input type="button" value="Remove Button" id="removeButton">
      </div>
    </div>

  </body>

</html>

提前感谢您的帮助！

Answer 1

我正在编写用于删除的代码，因为添加控件的代码工作正常。如你所愿，当你点击删除按钮然后它将删除那些对应于复选框的控件。

$("#removeButton").click(function () {
if (counter == 2) {
  alert("Can't remove any more textboxes");
  return false;
}      
  $('[id^=myCheckbox]').each(function(i){
      if($(this).is(':checked')){
          var getlastId=$(this).prop('id').substr(10);
          $("#TextBoxDiv" + getlastId).remove();
         $("#RextBoxDiv" + getlastId).remove();
          $(this).remove();
          counter--;
      }
  });

}）; }）; DEMO

使用jquery添加/删除文本框和复选框

1 个答案: