CODEWITHSUNDEEP
javascripthtml
user1516649
user1516649

Reputation: 155

unable to delete span inputbox

Hi I'm really new in Javascript... I'm trying to build list of input text box when user selects option. However, when user changes option, input text box is created beside previous input text box. Hence, there could be 100 input boxes if user continuously changes option. I want my program to delete everything in span and generate list of input text boxes. Please, give me any suggestions! 

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>

Upvotes: 0

Views: 122

Answers (4)

arhea
arhea

Reputation: 454

I have used jQuery since you have jQuery code on the page. Below is the corrected jsFiddle

Cache your selectors for speed

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

I used to do the click handler

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

I also used the jQuery value function

$select.val();

You dont want to remove the display because then inputBox is removed and you can no longer access it. So I just used empty on the input box.

$input.empty();

All of this is also, wrapper in document ready, there are two syntax for this, I use $(function(){}), but its up to you. You have to use document ready so that your elements are in the DOM for querying

Let me know if this helps.

http://jsfiddle.net/UR4H8/

Upvotes: 2

Matthias
Matthias

Reputation: 7521

You can remove every child with empty(). Just call it after selecting the span with jQuery

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

Upvotes: 1

Matanya
Matanya

Reputation: 6346

Using vanilla JavaScript you can simply add removeChild() before appending a new element.

with JQuery use the html() method, which replaces the existing content rather than appending it.

Upvotes: 1

ServerBloke
ServerBloke

Reputation: 852

Your selector doesn't look right, try:

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

Upvotes: 1

Related Questions