我有一些代码当前允许输入文本,一个按钮来添加它,然后一个按钮来删除它(一旦创建了所说的文本框)。我需要新创建的文本和按钮显示在标题“Weeks”下面(还有3列,但我当然可以在之后传输它)。
function removeElement(e) {
let button = e.target;
let field = button.previousSibling;
let div = button.parentElement;
let br = button.nextSibling;
div.removeChild(button);
div.removeChild(field);
div.removeChild(br);
let allElements = document.getElementById("reqs");
let inputs = allElements.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
inputs[i].setAttribute('id', 'reqs' + (i + 1));
inputs[i].setAttribute('value', (i + 1));
inputs[i].nextSibling.setAttribute('id', 'reqsr' + (i + 1));
}
}
function add() {
let allElements = document.getElementById("reqs");
let reqs_id = allElements.getElementsByTagName("input").length;
reqs_id++;
//create textbox
let input = document.createElement('input');
input.type = "text";
input.setAttribute("class", "w3-input w3-border");
input.setAttribute('id', 'reqs' + reqs_id);
input.setAttribute('value', reqs_id);
let reqs = document.getElementById("reqs");
//create remove button
let remove = document.createElement('button');
remove.setAttribute('id', 'reqsr' + reqs_id);
remove.onclick = function(e) {
removeElement(e);
};
remove.setAttribute("type", "button");
remove.innerHTML = "Remove";
//append elements
reqs.appendChild(input);
reqs.appendChild(remove);
let br = document.createElement("br");
reqs.appendChild(br);
}
body {
margin: 0;
padding: 0;
}
h1 {
font-family: sans-serif;
font-size: 16px;
}
input {
font-family: sans-serif;
display: block;
background-color: #333;
color: #FFF;
padding: 10px;
}
#reqs {
display: flex;
width: 100%;
height: 100%;
position: absolute;
}
.week {
flex: 1;
width: 100px;
border: 1px solid grey;
}
.add {
width: 100%;
background-color: #eee;
text-align: center;
}
.add textarea {
width: 90%;
}
remove {
width: 100%;
background-color: #eee;
text-align: center;
}
button {
width: 100%;
background-color: #eee;
text-align: center;
}
<div id="reqs">
<div class="week week1">
<div class="add">
<h1>Weeks</h1>
<textarea></textarea>
<button type="button" value="Add" onclick="javascript:add();">Add text</button><br>
</div>
</div>
<div class="week week2">
<div class="add">
<h1>Topics</h1>
<textarea></textarea>
</div>
</div>
目前新创建的文本区域和“删除”按钮位于屏幕的最右侧,并且工作正常。
发布于 2018-07-23 18:55:43
与你的代码有点不同,但可能更接近你正在寻找的东西?(稍微不清楚你想要按钮的位置......文字可能需要更宽)
function removeElement(e) {
let button = e.target;
let field = button.previousSibling;
let div = button.parentElement;
let br = button.nextSibling;
div.removeChild(button);
div.removeChild(field);
div.removeChild(br);
let allElements = document.getElementById("reqs");
let inputs = allElements.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
inputs[i].setAttribute('id', 'reqs' + (i + 1));
inputs[i].setAttribute('value', (i + 1));
inputs[i].nextSibling.setAttribute('id', 'reqsr' + (i + 1));
}
}
function add() {
let allElements = document.getElementById("reqs");
let reqs_id = allElements.getElementsByTagName("input").length;
reqs_id++;
//create textbox
let input = document.createElement('input');
input.type = "text";
input.setAttribute("class", "w3-input w3-border");
input.setAttribute('id', 'reqs' + reqs_id);
input.setAttribute('value', reqs_id);
let reqs = document.getElementById("reqs");
//create remove button
let remove = document.createElement('button');
remove.setAttribute('id', 'reqsr' + reqs_id);
remove.onclick = function(e) {
removeElement(e);
};
remove.setAttribute("type", "button");
remove.innerHTML = "Remove";
//append elements
reqs.appendChild(input);
reqs.appendChild(remove);
let br = document.createElement("br");
reqs.appendChild(br);
}
body {
margin: 0;
padding: 0;
}
h1 {
font-family: sans-serif;
font-size: 16px;
}
input {
font-family: sans-serif;
display: inline-block;
position:relative;
background-color: #333;
color: #FFF;
padding:10px;
}
#reqs {
width: 100%;
height: 100%;
position: relative;
}
.week {
display:inline-block;
vertical-align:top;
width: 49%;
border: 1px solid grey;
margin-bottom:2px;
}
.add {
width: 100%;
background-color: #eee;
text-align: center;
}
.add textarea {
width: 100%;
}
remove {
width: 100%;
background-color: #eee;
text-align: center;
}
button {
width: 50%;
background-color: #eee;
text-align: center;
padding:7px;
}
<div id="reqs">
<div class="week week1">
<div class="add">
<h1>Weeks</h1>
<textarea></textarea>
<button type="button" value="Add" onclick="javascript:add();">Add text</button><br>
</div>
</div>
<div class="week week2">
<div class="add">
<h1>Topics</h1>
<textarea></textarea>
</div>
</div>
https://stackoverflow.com/questions/-100005645
复制相似问题