Question

如何从div包装器中删除输入？当我点击＆＃34;减去＆＃34;按钮它只删除表单部分？请注意，我喜欢这一行，并希望仅针对此功能部分。 *我是初学者，不知道如何解释。

var input_count = 1;
var form_array = [];
function AddInputField() {
    var form = new Main_Input_Field();
    form_array.push(form);
}

function Main_Input_Field() {
    //if( document.getElementById("frm_drno").value != "") {
    if( true ) {
        var main_fild = document.getElementById("main_fieldset");
        var temp_form = document.createElement("form");
        main_fild.appendChild(temp_form);

        item_no = document.createElement("button")
        item_no.innerHTML = input_count;
        item_no.setAttribute("style", "width:35px");
        item_no.disabled = true;
        temp_form.appendChild(item_no);

        var temp_element = document.getElementById("form_temp").children;

        for( var i=0; i < temp_element.length; i++) {
            input = document.createElement("input");

            var attri = temp_element[i].getAttribute("type");
            input.setAttribute("type", attri);

            attri = temp_element[i].getAttribute("id");
            input.setAttribute("id", attri);

            attri = temp_element[i].getAttribute("name");
            input.setAttribute("name", attri);

            attri = temp_element[i].getAttribute("size");
            input.setAttribute("size", attri);

            attri = temp_element[i].getAttribute("style");
            input.setAttribute("style", attri);

            input.setAttribute("value", temp_element[i].value);
            temp_element[i].value = "";

            if( i >= 11 && i <= 13 ) {
                input.readOnly = true;
            }
            temp_form.appendChild(input);
        }

        //When I click this button it removes this form section only?
        // note that I have like hundred of this line and I want to target
        // this function section only.
        del_btn = document.createElement("button")
        del_btn.innerHTML = "-";
        del_btn.addEventListener ("click", function() {
            var num = item_no.innerHTML;
            console.log(num);
            alert(num);
        });

        temp_form.appendChild(del_btn);
        main_fild.style.display = "block";

        input_count++;
    }
    else {
        alert("Unable to ADD!!\nFieldset must not empty!!");
    }
}

my layout demonstrated here

Answer 1

感谢您的回复，但似乎我已经解决了问题。

＆＃13;

function Main_Input_Field() {
	...
	var temp_form = document.createElement("form");
	......

	......
	del_btn = document.createElement("button")//<<<<----- this is the problem causing chrome to reload the page
	del_btn.innerHTML = "-";
	del_btn.setAttribute("type", "button"); //<<<<----- Adding this line fix it.
	del_btn.addEventListener ("click", function() {
		temp_form.remove(); // this is the guy who get the job done.
	});
}

＆＃13;

Answer 2

参考https://stackoverflow.com/a/5865511/5144902

document.getElementById(id).style.visibility= "hidden";
document.getElementById(id).style.visibility= "visible";

如何从div包装器中删除输入？

2 个答案: