Question

我有一个包含表单的webapp。主相关元素是包含两列输入的行。（两个html输入）。

用户需要能够添加或删除行，但应始终至少有一行。如果只有一行，则应清除输入，左输入应获得焦点。

默认情况下，当页面加载时，我在HTML中定义了这个：

      <div class='row' id="group1">
        <div class='col-sm-offset-2 col-sm-4'>
          <div class='form-group'>
            <label class='control-label' for='input1'>Input</label>
            <input class='form-control' id='input1' name='input' type='text' />
          </div>
        </div>
        <div class='col-sm-4'>
          <div class='form-group'>
            <label for='output1'>Output</label>
            <div class = 'input-group'>
              <input class='form-control' id='output1' name='output' type='text' />
              <span class="input-group-btn">
                <button class='btn btn-success' id='remove1' type='button' onClick='removeClick(1)'>X</button>
              </span>
            </div>
          </div>
        </div>
      </div>

在我的此页面的javascript文件中，在onClick中添加新行的按钮，并在删除单击时删除该行或清除它：

var inputCount = 1;

$("#add-button").click(function(){
    inputCount++;
    $('#advanced-row').before(" \
      <div class='row' id='group" + inputCount +"'> \
        <div class='col-sm-offset-2 col-sm-4'> \
          <div class='form-group'> \
            <label class='visible visible-xs' for='input" + inputCount + "'>Input " + inputCount + "'</label> \
            <input class='form-control' id='input" + inputCount + "' name='input' type='text'/> \
          </div> \
        </div> \
        <div class='col-sm-4'> \
          <div class='form-group'> \
            <label class='visible visible-xs' for='output" + inputCount + "'>Output 2</label> \
            <div class = 'input-group'> \
              <input class='form-control' id='output" + inputCount + "' name='output' type='text' /> \
              <span class='input-group-btn'> \
                <button class='btn btn-success' id='remove2' type='button' onClick='removeClick(" + inputCount + ")'>X</button> \
              </span> \
            </div> \
          </div> \
        </div> \
      </div>");
    return false;
});


function removeClick(row)
{
    if (inputCount > 1) {
        $("#group" + row).remove();
        inputCount--;
    } else {
        clearInput(row);
    }
}

function clearInput(row)
{
    $("#input" + row).val('');
    $("#output" + row).val('');
    $("#input" + row).focus();
}

这对我来说很好。但是，我不喜欢像在JS中那样将HTML写成字符串，它不会让我有办法轻易地换出或修改。

Answer 1

你不需要跟踪那里的计数 - 因为你已经使jQuery可用，只需使用jQuery选择器返回的元素数：

if ($('input').length > 1) {
    // allow removal
} else {
    // clear inputs and set focus on another
}

即使您不想使用jQuery，在处理具有length属性的节点列表时也可以直接使用vanilla js：

if (document.getElementsByTagName('input').length > 1)

另外，我建议不要使用onclick，而只是在脚本中定义jquery处理程序。

Answer 2

您可以尝试$("#group1").clone()并更改元素'ID。

在客户端添加/删除HTML div的更好方法

2 个答案: