jQuery动态添加按钮加号和减号

Question

这里我想要的是，如果我点击+按钮应该显示另一个字段，更改+到-.1st字段不应该被删除（+按钮应该保持相同）。但在我的代码第1行是删除。请更正我的代码。

单击+按钮时，应添加另一个字段，按钮应从“+”更改为“ - ”。如果单击 - 按钮，则应删除最后添加的行。但在我的代码第1行正在删除。如图所示。

$(document).ready(function() {
  $(' button[name="addnewbro"]').live('click', function() {
    if ($(this).text().indexOf('+') > -1) {
      var cp = $(this).parent().parent().clone();
      $(cp).find('button[name="addnewbro"]').text('-');
      $(cp).insertBefore($(this).parent().parent().val(''));
      $(this).parent().parent().find('input').val('');
    } else {
      $(this).parent().parent().remove();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<fieldset class="brother" style="width:40%">
  <div class="bro">
    <div>
      <div>
        <div>
          <input type="text" name="BWorking_Company" placeholder="Company/School Name" />
        </div>
        <div>
          <input type="text" name="BWorking_address_l" placeholder="Address Line 1" />
        </div>
        <div>
          <input type="text" name="BWorking_address_2" placeholder="Address Line 2" />
        </div>
        <div>
          <input type="text" name="BWorking_address_3" placeholder="Address Line 3" />
        </div>
        <div>
          <input type="text" name="BWorking_city" placeholder="City" />
        </div>
        <div class="pbro">
          <div>
            <input type="text" id="bzip" name="bzip" placeholder="PIN" />
          </div>
          <div>
            <input type="text" id="btaluk" name="btaluk" placeholder="Taluk" size="10" />
            <input type="text" name="bdist" id="bdist" placeholder="District" size="10" />
          </div>
          <div>
            <input type="text" name="bstate" id="bstate" placeholder="State" size="15" />

          </div>
          <div>
            <input type="text" name="bcountry" id="bcountry" placeholder="Country" />
          </div>
        </div>
      </div>
      <div>
        <button name="addnewbro">
          +
        </button>
      </div>

    </div>
  </div>
</fieldset>

Answer 1

请试试这个。添加了示例

$(document).ready(function() {
      $(' button[name="addnewbro"]').live('click', function() {
        if ($(this).text().indexOf('+') > -1) {
          var cp = $(this).parent().parent().clone();
          $(cp).find('button[name="addnewbro"]').text('-');
          $(cp).insertBefore($(this).parent().parent().val(''));
          $(this).parent().parent().find('input').val('');
        } else {
          var $container = $( this ).parent().parent().parent();
          $container.children("div:last-child").remove();
          $container.children("div:last-child" ).find('button[name="addnewbro"]').text("+"); 
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div class="bro">
  <div>
    <div>
      <div>
        <input type="text" name="BWorking_Company" placeholder="Company/School Name" />
      </div>
      <div>
        <input type="text" name="BWorking_address_l" placeholder="Address Line 1" />
      </div>
      <div>
        <input type="text" name="BWorking_address_2" placeholder="Address Line 2" />
      </div>
      <div>
        <input type="text" name="BWorking_address_3" placeholder="Address Line 3" />
      </div>
      <div>
        <input type="text" name="BWorking_city" placeholder="City" />
      </div>
      <div class="pbro">
        <div>
          <input type="text" id="bzip" name="bzip" placeholder="PIN" />
        </div>
        <div>
          <input type="text" id="btaluk" name="btaluk" placeholder="Taluk" size="10" />
          <input type="text" name="bdist" id="bdist" placeholder="District" size="10" />
        </div>
        <div>
          <input type="text" name="bstate" id="bstate" placeholder="State" size="15" />

        </div>
        <div>
          <input type="text" name="bcountry" id="bcountry" placeholder="Country" />
        </div>
      </div>
    </div>
    <div>
      <button name="addnewbro">
        +
      </button>
    </div>
  </div>
</div>