【发布时间】：2018-08-08 06:19:47
【问题描述】：
我有一个包含 1 个选择输入字段的表单。
当我在选择字段中选择一个选项时。默认情况下，我会创建一个部分，其中包含文本输入字段、关闭按钮和添加字段按钮以添加更多输入文本字段。
一切正常，但我不确定如何删除动态创建的输入字段。当我单击旁边的删除按钮时，我不确定使用 id 或类或名称属性或什么 来查找并删除输入字段。
我的代码
HTML 代码
<div class="form-group">
<div class="row">
<div class="col-md-12" id="extraFieldsLabelHolder"></div>
</div>
<div class="row" id="extraFields">
<!-- here I can add as many custom fields I want -->
</div>
</div>
JS 代码
function addFields(){
var selectVal = document.getElementById('type_id').value;
if(selectVal === 'checkbox' || selectVal === 'radio'){
if(!document.getElementById("addBtn")){
//add input fields
var extraFieldDIV = document.getElementById("extraFieldsLabelHolder");
var fieldLabel = document.createElement("label");
fieldLabel.setAttribute("for", "extraFields");
fieldLabel.setAttribute('id', "extraFieldsLabel")
fieldLabel.textContent = "Add Custom Field Options:";
extraFieldDIV.appendChild(fieldLabel);
//IT MAY LOOK COMPLEX BUT ITS FAIRLY STRAIGHTFORWARD
//Code below creates mainDiv and a Div which holds input and a delete btn
var fieldArea = document.getElementById('extraFields');
var mainDiv = document.createElement("div");
mainDiv.setAttribute("class", "input_field col-md-4");
mainDiv.setAttribute("style", "margin-bottom:10px;");
fieldArea.appendChild(mainDiv);
var div = document.createElement("div");
div.setAttribute("class", "input-group");
mainDiv.appendChild(div);
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("class", "form-control input_field");
input.setAttribute("placeholder", "Enter value...");
input.setAttribute("name", "extras[]");
div.appendChild(input);
var span = document.createElement("span");
span.setAttribute("class", "input-group-btn");
div.appendChild(span);
var closeBtn = document.createElement("button");
closeBtn.setAttribute("type", "button");
closeBtn.setAttribute("class", "btn btn-danger");
//YOU CAN SEE HERE I PASS ONCLICK METHOD but not sure what to do NEXT
//ALL I GET IS INFO OF A DELETE BUTTON and Not the actual DIV which contains input field too.
closeBtn.setAttribute("onclick", "removeInputField(this)");
span.appendChild(closeBtn);
var iElement = document.createElement("i");
iElement.setAttribute("class", "pe-7s-close");
iElement.setAttribute("style", "font-size:20px");
closeBtn.appendChild(iElement);
var btnArea = document.getElementById('addFieldBtnHolder');
var btn = document.createElement("button");
btn.setAttribute("type", "button");
btn.setAttribute("class", "btn btn-primary");
btn.setAttribute("style", "margin-top:15px;");
btn.setAttribute("onclick", "addInputField()");
btn.textContent = "Add Field";
btn.setAttribute('id', "addBtn");
btnArea.appendChild(btn);
}
}else{
if(document.getElementById("addBtn")) {
document.getElementById("extraFieldsLabel").remove();
document.getElementById("addBtn").remove();
var inputs = document.getElementsByClassName('input_field');
for(var i = 0; i < inputs.length; i++){
inputs[i].remove();
}
}
}
}
function addInputField(){
console.log("test2");
var fieldArea = document.getElementById('extraFields');
var mainDiv = document.createElement("div");
mainDiv.setAttribute("class", "input_field col-md-4");
mainDiv.setAttribute("style", "margin-bottom:10px;");
fieldArea.appendChild(mainDiv);
var div = document.createElement("div");
div.setAttribute("class", "input-group");
mainDiv.appendChild(div);
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("class", "form-control input_field");
input.setAttribute("placeholder", "Enter value...");
input.setAttribute("name", "extras[]");
div.appendChild(input);
var span = document.createElement("span");
span.setAttribute("class", "input-group-btn");
div.appendChild(span);
var closeBtn = document.createElement("button");
closeBtn.setAttribute("type", "button");
closeBtn.setAttribute("class", "btn btn-danger");
closeBtn.setAttribute("onclick", "removeInputField(this)");
span.appendChild(closeBtn);
var iElement = document.createElement("i");
iElement.setAttribute("class", "pe-7s-close");
iElement.setAttribute("style", "font-size:20px");
closeBtn.appendChild(iElement);
}
//WHAT LOGIC DO I PUT HERE TO DELETE THE DIV CONTAINING input and delete button?
function removeInputField (selectedField) {
console.log("this: ", selectedField.value);
}
【问题讨论】：
-
你更喜欢哪个，原生js还是jquery？
-
没有一个事件可供用户调用任何函数。你如何测试这个？您知道 id 必须是唯一的吗？如果您设法创建多个具有相同 id 的元素，则无效加上会导致意外行为。
-
@plonknimbuzz 我更喜欢原生 js，因为我全部用 js 编写。如果可能的话，我不想在两者之间使用 jquery
-
@zer00ne 我正在考虑创建一个计数器并增加 id，但后来我不知道什么是最好的方法，所以我询问了一些我可以添加的逻辑。我愿意接受建议
-
@MurlidharFichadia 活动我的朋友，我不能保证您的预期布局的确切结果，但我会做的足够让您有一个好主意。
标签： javascript jquery dom dom-manipulation