清除div内任何输入值的简单方法？

Posted 2023-02-22

【中文标题】清除div内任何输入值的简单方法？

【英文标题】：Simple way to clear the value of any input inside a div?

【发布时间】：2010-12-02 18:27:49

【问题描述】：

有没有一种简单的方法来迭代一个元素中的子元素，比如一个 div，如果它们是 any 类型的输入（收音机、选择、文本、隐藏...），则清除他们的价值？

编辑以添加指向example solution code. 的链接非常感谢 Guffa 和其他受访者！我从中学到了！

【参考方案1】：

卡里姆的回答效果很好。使用 jQuery，我相信它会变成这样：

$("#myDiv").each(function()
   if($(this).type == "input")
      $(this).val('');
);

其实想想，你也可以试试：

$("#myDiv input").val('');//myDiv is your Div name

【讨论】：

我在这个页面中已经有了一些 Scriptaculous 效果。在 jQuery 中也加载会产生冲突吗？

您可以使用以下内容来避免冲突：添加 jQuery.noConflict();到页面顶部，并在调用 jQuery 函数时用单词 jQuery 替换每个 '$'。更多信息：docs.jquery.com/Using_jQuery_with_Other_Libraries

感谢 TTG！我现在会调查这个！1

【参考方案2】：

我想你想清除所有的孩子，而不仅仅是直接的孩子，所以它必须是递归的。由于不同的输入元素以不同的方式清除，因此您必须检查它们的类型，以便知道如何处理它们。我想您也想清除 textareas，但保持按钮不变：

function clearChildren(element) 
   for (var i = 0; i < element.childNodes.length; i++) 
      var e = element.childNodes[i];
      if (e.tagName) switch (e.tagName.toLowerCase()) 
         case 'input':
            switch (e.type) 
               case "radio":
               case "checkbox": e.checked = false; break;
               case "button":
               case "submit":
               case "image": break;
               default: e.value = ''; break;
            
            break;
         case 'select': e.selectedIndex = 0; break;
         case 'textarea': e.innerhtml = ''; break;
         default: clearChildren(e);
      
   

通过引用元素来调用它：

clearChildren(document.getElementById('IdOfTheDiv'));

编辑： 忘记选择...

编辑 2： 一些更正：childNodes.length，处理没有 tagName 和大写 tagName 值的元素。

【讨论】：

很好的假设需要它来处理孩子的孩子，但是你不需要递归来抓取后代节点。

感谢您的回复！！我正在尝试实现这一点并且有一个奇怪的症状。简单的测试表格没有明显的效果。如果我收到打印元素的警报，我会得到 [object HTMLDivElement]（好..）如果我得到 alert() 来打印 element.childNodes 它有 [object nodeLIst]（再次好）但是如果我得到 alert() 来回显该值for() 中的 i 永远不会触发，所以它似乎不会遍历节点？代码如下： function clearChildren(element) for (var i = 0; i

将 for (var i = 0; i

啊，它必须是 case 'INPUT': not case 'input': w00t!1 正在工作，谢谢！！！

@crescentfresh：是的，你不需要递归。实际上你永远不会这样做，总是有不同的方法来解决它，但它适用于嵌套元素。 :)

【参考方案3】：

哦，男孩，这将是 jQuery 的单行代码：

$(':input:not(:button)', div).val([])

如果没有 jQuery，您必须考虑 <select> 字段、文本字段、密码字段和单选框/复选框字段：

function clearFields(container) 
    var selects = container.getElementsByTagName('select');

    for(var i=0, len=selects.length; i < len; i++) 
        selects[i].selectedIndex = -1;
    

    var fields = container.getElementsByTagName('input');
    for(var i=0, len=fields.length; i < len; i++) 
        var field = fields[i];
        switch(field.type)
        
            case 'radio':
            case 'checkbox':
                field.checked = false;
                break;

            case 'text':
            case 'password':
            case 'hidden':
                field.value = ''
        
    

    var fields = container.getElementsByTagName('textarea');
    for(var i=0, len=fields.length; i < len; i++) 
        fields[i].value = ''
    

【讨论】：

jQuery 解决方案不处理复选框或单选按钮，它会清除按钮的文本...

【参考方案4】：

使用 JQuery 非常简单：

$('#myDiv').children().find('input,select').each(function()
   $(this).val('');
);

我们可以在“find”调用中放置尽可能多的标签。

【讨论】：

不错的...只是想知道您是否可以在没有孩子的情况下做到这一点（）？例如： $('#myDiv').find('input,select').each(function() $(this).val(''); );

【参考方案5】：

荣誉，哈雷什！取消选中复选框的小补充。 （使用 true 来检查所有。）

$('#myDiv').children().find('input,select').each(function()

$(this).val('');
$(this).attr('checked',false);

);

【参考方案6】：

$('#div_id input[type=textbox], #div_id select, #div_id textarea').val(''); 
$('#div_id input[type=radio], #div_id input[type=checkbox]').prop('checked', false);

用于 jquery。

【参考方案7】：

使用以下代码清除所有类型的输入表单元素值

function clear_form_elements(id_name) 
  jQuery("#"+id_name).find(':input').each(function() 
    switch(this.type) 
        case 'password':
        case 'text':
        case 'textarea':
        case 'file':
        case 'select-one':       
            jQuery(this).val('');
            break;
        case 'checkbox':
        case 'radio':
            this.checked = false;
    
  );

【参考方案8】：

这是一个旧帖子，但有人可以看到它。

function clearFields(divElement) 
    var ancestor = document.getElementById(divElement),
    descendents = ancestor.getElementsByTagName('*');

    var i, e, d;
    for (i = 0; i < descendents.length; ++i) 
        if (descendents[i].tagName.toLowerCase() == 'input')
            switch (descendents[i].type)
                case 'text':
                case 'password':
                case 'color':
                case 'date':
                case 'email':
                case 'month':
                case 'number':
                case 'range':
                case 'search':
                case 'tel':
                case 'time':
                case 'url':
                case 'week':
                    descendents[i].value = '';
                    break;

                case 'radio':
                case 'checkbox':
                    descendents[i].checked = false;
            
        
        else if (descendents[i].tagName.toLowerCase() == 'select')
            descendents[i].selectedIndex = 0;
        
       

并使用它：

clearFields ('divName');

当然你可以添加更多的元素来休息它