Question

实际上我想通过点击按钮添加文本字段。它工作正常但我无法通过单击“删除”按钮删除文本字段。请参阅以下代码：

<script type="text/javascript">

var i = 1;
function more_fields() {

 i++;
 var objTo = document.getElementById('more_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+i);
var rdiv = 'removeclass'+i;

divtest.innerHTML = '<div><input type="text" name="comp[]" id="component" 
value="" placeholder="Product" /> <input type="number"  
name="quantity[]" id="quantity" placeholder="Quantity" /> <input 
type="number"  name="rate[]" id="rate" placeholder="Rate" /> <input 
type="number"  name="amount[]" id="amount" placeholder="Amount" readonly /> 
<button class="btn btn-danger" type="button" onclick="remove_more_fields('+ 
 i +');" style="height:2em; width:3%;">X</button></div>';

objTo.appendChild(divtest)
}

function remove_more_fields(rid) {
   $('.removeclass'+rid).remove();
}
</script>


  <div class="form-group fieldgroup" id="more_fields">
  <div>
   <input type="text" name="comp[]" id="component" value="" 
                       placeholder="Product" /> 
   <input type="number"  name="quantity[]" 
   id="quantity" placeholder="Quantity"/>
    <input type="number"  name="rate[]" 
    id="rate" placeholder="Rate" /> 
    <input type="number"  name="amount[]" 
    id="amount" placeholder="Amount" readonly/> 
    <button class="add_field_button" 
    type="button" onclick="more_fields()"> Add</button>
    </div>
    <br/>
    </div>

我怎样才能得到这个结果？我想计算数量*率并在金额字段中自动显示结果。如果我更改数量或费率，自动金额将更改并显示结果。请建议我......谢谢。

Answer 1

试试这个以获得金额：

<div class="form-group fieldgroup" id="more_fields">
  <div>
    <input type="text" name="comp[]" id="component" value="" placeholder="Product" />
    <input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" />
    <input type="number" name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" />
    <input type="number" name="amount[]" id="amount" placeholder="Amount" readonly/>
    <button class="add_field_button" type="button" onclick="more_fields()"> Add</button>
  </div>
  <br/>
</div>
<script>
  var i = 1;

  function more_fields() {

    i++;
    var objTo = document.getElementById('more_fields');
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass" + i);
    var rdiv = 'removeclass' + i;
    divtest.innerHTML = '<div><input type="text" name="comp[]" id="component" value="" placeholder="Product" /> <input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" /> <input type="number"  name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" /> <input type="number"  name="amount[]" id="amount" placeholder="Amount" readonly /> <button class="btn btn-danger" type="button" onclick="remove_more_fields(' + i + ');" style="height:2em; width:3%;">X</button></div>';

    objTo.appendChild(divtest)
  }

  function remove_more_fields(rid) {
    $('.removeclass' + rid).remove();
  }
function getAmount(el)
{
console.log(el.parentElement);
var inputs = el.parentElement.getElementsByTagName('input');

inputs[3].value = (parseInt(inputs[1].value) * parseFloat(inputs[2].value));

}
</script>

这是有效的JSFiddle

Answer 2

将onclick函数添加到这样的删除按钮 - onclick =＆＃34; remove_more_fields（i）;＆＃34; 。这将使函数调用i的值传递给remove_more_fields函数。

我在这里错过的是你可以在 - <div>...</div>中包含整个divtest.innerHTML定义（请注意这里的引用），因为我的编辑器显示了跨越多行的字符串的错误。这可能引发了对我的评价，它对我来说非常好。

如何在javascript中删除输入文本字段

2 个答案: