Javascript 无法删除span输入框

嗨，我是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>

函数myInputs（）{
警报（“写入输入”）；
var值=document.getElementById（“名称”）.value；
var split=value.split（“，”）；
变量大小=split.length；
var out=document.getElementById（“inputBox”）；
$（this）.parent（'display'）.remove（）；//不删除任何。。。
对于（var j=0；j您的选择器看起来不正确，请尝试：

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

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

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

您可以使用
empty（）
删除每个子项。只需在使用jQuery选择
span
后调用它即可

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

您可以使用
empty（）
删除每个子项。只需在使用jQuery选择
span
后调用它即可

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

我使用jQuery是因为页面上有jQuery代码

缓存选择器以提高速度

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);
        }
    }                
});

您不想删除显示，因为此时inputBox已被删除，您无法再访问它。因此我在输入框上使用了empty

$input.empty();

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

让我知道这是否有帮助

我使用jQuery，因为页面上有jQuery代码。下面是更正的JSFIDLE

缓存选择器以提高速度

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);
        }
    }                
});

您不想删除显示，因为此时inputBox已被删除，您无法再访问它。因此我在输入框上使用了empty

$input.empty();

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

让我知道这是否有帮助

使用普通JavaScript，您只需在添加新元素之前添加
removeChild（）

使用JQuery时，使用
html（）
方法，它替换现有内容而不是附加内容。
使用普通JavaScript，您只需在附加新元素之前添加
removeChild（）

对于JQuery，使用
html（）
方法，该方法替换现有内容，而不是附加内容