Question

我的页面的一些背景信息：

我有一个总是有一个输入字段的部分。在下面有一个＆＃34;添加＆＃34;创建更多的按钮输入字段。因为屏幕上只需要一个字段后续字段附有＆＃34;删除＆＃34;删除按钮相关的输入字段。

以下是它的屏幕截图：http://postimg.org/image/b1yz67b1f/

正如你可以看到按钮＆＃34; - ＆＃34;放在每个输入框后面。我要求他们走到右边。我试过了显示：内联在＆＃34; - ＆＃34; /删除按钮无效。

代码：

function addField(count) {


    if (count<=4){
    count++;
    var id = "tag"+count;
    var newField = document.createElement("input");
    newField.setAttribute('type', 'text');
    newField.setAttribute('class', 'field');
    newField.setAttribute('id', id);

    var place = document.getElementById("tags");
    inputContainer.appendChild(newField);

    var removeId = "remove"+count;
    var remove = document.createElement("input");
    remove.setAttribute("type", "button");
    remove.setAttribute("value", "-");
    remove.setAttribute('class', 'remove');
    remove.setAttribute('id', removeId);


    remove.onclick = function () { 
        var targetInput = document.getElementById(id);
        var targetRemove = document.getElementById(removeId);
        targetInput.remove();
        targetRemove.remove();
     };

    inputContainer.appendChild(remove);
    return count;
    } 


}

Answer 1

据我了解你的问题，我想出了以下方法：

JS Fiddle Demo

<强> HTML：

<div id="inputContainer">
<div class="inputFieldWithButton">
<input type="text" />
<button onclick="addInput();">+</button>
</div>
</div>

<强> JS：

var id = 1;
function addInput()
{
    var inputId = 'input'+id;
    document.getElementById("inputContainer").innerHTML += "<div id='"+inputId+"' class='inputFieldWithButton'><input type='text' /><button onclick='removeContainer("+inputId+")'>-</button></div>";
    id++;
}

function removeContainer(_inputId)
{
    document.getElementById(_inputId.id).remove();
}

希望这有帮助。

Answer 2

您有两种选择：

将每一行包裹在自己的<div>：

中

<div><input type="text"><button>-</button></div>

在每行后加<br>：

<input type="text"><button>-</button><br>

首先，您必须调整JS以首先制作<div>标签，然后在里面添加输入。对于第二个，您可以在制作时附加所有元素，只需添加<br>元素。

var div = document.createElement('div');
var input = document.createElement('input');
var button = document.createElement('button');

button.innerText = '-';

div.appendChild(input);
div.appendChild(button);
inputContainer.appendChild(div);

DEMO展示了两个示例：http://jsfiddle.net/7UaAh/1/

DOM脚本：创建元素并将它们放在一行上

2 个答案: