如何删除表单字段

Question

我有一个填充了数据库输出的表单。在处理之前，用户可以在需要时更改值。 如何通过点击“Aantal＆＃39;

”栏中的所有条目删除所有条目

<tr>
    <td><img border="0" align="center" src="<?php echo $config['prod_image'].$image_fld[$i].'/'.$image_name[$i].$config['prod_image_type']; ?>" /></td>
    <td><input type="text" name="aantal[]" size="2" value="<?php echo $aantal[$i]; ?>" <?php if($error_aantal[$i] == 'ja'){ $error_omschr = $error_omschr_aantal[$i]; include('includes/errors/input_error.php'); } ?></td>
    <td><input type="text" name="productnaam[]" size="35" value="<?php echo $productnaam[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
    <td><input type="text" name="afmeting[]" size="15" value="<?php echo $afmeting[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
    <td><input type="text" name="kwaliteit[]" size="15" value="<?php echo $kwaliteit[$i]; ?>" style="background-color: #e7e7e9" readonly="readonly" /></td>
    <td align="center">
        <input type="radio" name="garantie[<?php echo $i ?>]" <?php if ("nee" == $garantie[$i]) { echo 'checked="checked"'; } ?> value="nee">
        <input type="radio" name="garantie[<?php echo $i ?>]" <?php if("ja" == $garantie[$i]) { echo 'checked="checked"'; } ?> value="ja">

        <?php if($error_garantie[$i] == 'ja'){ 
            $error_omschr = $error_omschr_garantie[$i]; include('includes/errors/input_error.php'); 
        } ?> 
    </td>
</tr>

Answer 1

我希望我能正确理解你：

在处理表单的php文件中，请确保向该列添加class attribute。 此外，您应该添加一个按钮或单击它的元素将触发隐藏操作。

例如：

        <td><input type="text" class="aantal" name="aantal[]" size="2" value="<?php echo $aantal[$i]; ?>" <?php if($error_aantal[$i] == 'ja'){ $error_omschr = $error_omschr_aantal[$i]; include('includes/errors/input_error.php'); } ?></td>

后来：

<button id="myHidingButton">Click to hide aantal inputs.</button>

然后，使用JS你可以写：

var button = document.getElementById("myHidingButton"); //The button.
button.addEventListener("click",function(e){ //The onClick event.
  //Get the element with the `aantal` class name and define the `i` variable.

  var colToHide = document.getElementsByClassName('aantal'), i;

  //Loop through all the aantal elements and hide them.
  for (var i = 0; i < colToHide.length; i ++) {
      colToHide[i].style.display = 'none';
  }


},false);

Answer 2

按下按钮时删除所有aantal条目：

＆＃13;

＆＃13;

// Using jQuery
$("#reset_btn").click(function() {
  $("input[name='aantal[]']").val("0");
});

// pure javascript
document.getElementById("reset_btn").addEventListener("click", function() {
  Array.prototype.forEach.call(document.querySelectorAll("input[name='aantal[]']"), function(node) {
    node.value = "0";
  });
}, false);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="aantal[]" size="2" value="1" />
<input type="text" name="aantal[]" size="2" value="2" />
<input type="text" name="aantal[]" size="2" value="3" />

<button id="reset_btn">Reset</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

<script type="text/javascript"</script>
function reset_aantal()
{

        var i, totaal = 0;
        var elems = document.getElementsByName('aantal[]');
        var l = elems.length;
        for(i=0; i<l; i++)
        {
             document.getElementsByName('aantal[]')[i].value = '';
        }
}
</script>