Question

嗨，我是Javascript的新手...... 当用户选择选项时，我正在尝试构建输入文本框列表。但是，当用户更改选项时，会在上一个输入文本框旁边创建输入文本框。因此，如果用户不断更改选项，则可能有100个输入框。我希望我的程序删除span中的所有内容并生成输入文本框列表。拜托，给我任何建议！

function myInputs() {

        alert('writing inputs'); 
        var value = document.getElementById("name").value; 
        var split = value.split(",");
        var size = split.length;
        var out = document.getElementById("inputBox");
        $(this).parent('display').remove(); //doesn't delete any...
        for (var j=0; j<size; j++){
            if (split[j] != ""){
            var element = document.createElement("input");
            //Assign different attributes to the element.
            element.setAttribute("type", "text");
            element.setAttribute("value", split[j]);
            element.setAttribute("name", split[j]);
            out.appendChild(element);}
      }
};


//html
<table border="0">
<tr>
        <td>Select run : </td>
        <td><select id="name" name="name" onchange="myInputs()">
             <option value="time" name="timer">timer</option>
             <option value="date,time" name="Performance">Performance</option>
             <option value="location,time" name="Copy">Copy</option>
             </select>
        </td>
 </tr>
 </table>
 <div id="display"><span id = "inputBox"></span></div>

Answer 1

我已经使用了jQuery，因为你在页面上有jQuery代码。以下是更正后的jsFiddle

将选择器缓存为速度

var $select = $('#name');
var $input = $('#inputBox');

我曾经做过点击处理程序

$select.on("change",function(event){

    $input.empty();

    var value = $select.val().split(",");
    var size = value.length;

    for (var j=0; j<size; j++){
        if (value[j] != ""){
            var element = document.createElement("input");
            element.setAttribute("type", "text");
            element.setAttribute("value", value[j]);
            element.setAttribute("name", value[j]);
            $input.append(element);

            // could also do this but it is slower
            // var $element = $('<input/>',{
            //     type: "text",
            //     name: value[j],
            //     value: value[j]
            // });
            //$input.append($element);
        }
    }                
});

我还使用了jQuery值函数

$select.val();

您不想删除显示，因为然后inputBox被删除，您无法再访问它。所以我只是在输入框上使用了空。

$input.empty();

所有这些也是，文件准备好的包装器，有两种语法，我使用$（function（）{}），但它取决于你。您必须使用文档准备好，以便您的元素在DOM中进行查询

如果有帮助，请告诉我。

http://jsfiddle.net/UR4H8/

Answer 2

您的选择器看起来不正确，请尝试：

$('#display input').remove(); // remove all input's under #display

Answer 3

您可以删除empty()的每个孩子。在使用jQuery

选择span后调用它

var out = $("#inputBox");
out.empty();

Answer 4

使用vanilla JavaScript，您只需在添加新元素之前添加removeChild()。

使用JQuery使用html()方法，该方法取代现有内容而不是附加内容。

无法删除span输入框

4 个答案: