如何使用javascript在DIV中动态删除文本框

时间：2016-07-27 09:44:07

标签： javascript html css

如何使用javascript删除DIV中的TextBox。首先，我在div中创建了四列，然后使用div中的Add按钮动态创建了复选框。

我的问题是我需要使用“删除”按钮（文本框后面）删除相应的文本框。

所以请给我一个解决方案来纠正它。

＆＃13;
＆＃13; 
function Add() {
  div1.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
  div2.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
  div3.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
  div4.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
}

function removeRow(input) {
  document.getElementById('div1').removeChild(input.parentNode);
}
＆＃13; 
#Wrapper {
  width: 90%;
  margin: 0 auto;
}
#div1 {
  float: left;
  width: 20%;
  background: lightblue;
}
#div2 {
  float: left;
  width: 20%;
  background: lightyellow;
}
#div3 {
  float: left;
  width: 20%;
  background: lightgray;
}
#div4 {
  float: left;
  width: 20%;
  background: lightblue;
}
#ClearFix {
  clear: both;
}
＆＃13; 
<button onclick="Add()">Add TextBox</button>
<div id="Wrapper">
  <div id="div1">
    <p>This is Div one</p>
  </div>

  <div id="div2">
    <p>This is Div two</p>
  </div>

  <div id="div3">
    <p>This is Div threee</p>
  </div>

  <div id="div4">
    <p>This is Div Four</p>
  </div>

  <div id="ClearFix"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：1)

试试这个工作片段。

ItemSource
// Code goes here

function Add() {
  div1.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
  div2.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
  div3.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
  div4.innerHTML += "<br><br> <input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
}

function removeRow(input) {
  if(input.previousElementSibling.tagName == "INPUT"  && input.previousElementSibling.getAttribute("type") == "text") {
    var inputElement = input.previousElementSibling;
    var divId = input.parentNode.id;
    document.getElementById(divId).removeChild(inputElement);
  }
}
/* Styles go here */

#Wrapper {
  width: 90%;
  margin: 0 auto;
}
#div1 {
  float: left;
  width: 20%;
  background: lightblue;
}
#div2 {
  float: left;
  width: 20%;
  background: lightyellow;
}
#div3 {
  float: left;
  width: 20%;
  background: lightgray;
}
#div4 {
  float: left;
  width: 20%;
  background: lightblue;
}
#ClearFix {
  clear: both;
}

答案 1 :(得分：0)

你只需要在一个容器中包装你的输入和删除按钮，让我们说div。 还传递

中的第二个参数

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
    <head>
    <title>Dynamic Form</title>

    <style>

    #Wrapper
        {
            width:90%;
            margin:0 auto;
        }

        #div1
        {
            float:left;
            width:20%;
            background:lightblue;
        }


        #div2
        {
            float:left;
            width:20%;
            background:lightyellow;
        }

        #div3
        {
            float:left;
            width:20%;
            background:lightgray;
        }

        #div4
        {
            float: left;
            width:20%;
            background:lightblue;
        }

        #ClearFix
        {
            clear:both;
        }
    </style>
    </head>
    <body>


    <button onclick="Add()">Add TextBox</button>

    <div id="Wrapper">
        <div id="div1">
            <p>This is Div one</p>
        </div>

        <div id="div2">
            <p>This is Div two</p>
        </div>

        <div id="div3">
            <p>This is Div threee</p>
        </div>

        <div id="div4">
            <p>This is Div Four</p>
        </div>

        <div id="ClearFix"></div>
    </div>

    <script>
    function Add()
    {
        div1.innerHTML += "<br><br> <div><input type='text' name='mytext'>"+"<input type='button' value='Delete' onclick='removeRow(this,this.parentNode.parentNode)'></div>";
        div2.innerHTML += "<br><br> <div><input type='text' name='mytext'>"+"<input type='button' value='Delete' onclick='removeRow(this,this.parentNode.parentNode)'></div>";
        div3.innerHTML += "<br><br> <div><input type='text' name='mytext'>"+"<input type='button' value='Delete' onclick='removeRow(this,this.parentNode.parentNode)'></div>";
        div4.innerHTML += "<br><br> <div><input type='text' name='mytext'>"+"<input type='button' value='Delete' onclick='removeRow(this,this.parentNode.parentNode)'></div>";
    }

    function removeRow(input,parent)
    {
        parent.removeChild(input.parentNode);
    }
    </script>
    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

removeRow函数 这是一个有效的例子。

答案 2 :(得分：0)

将removeRow()功能编辑为：

function removeRow(input)
{
    input.parentNode.removeChild(input.previousSibling);
}

这将只删除输入框并保留删除按钮。

<强> 修改

要删除输入框和按钮：

function removeRow(input)
{
    input.parentNode.removeChild(input.previousSibling);
    input.parentNode.removeChild(input);
}

答案 3 :(得分：0)

您的代码中有许多未定义的变量。希望您尝试引用id 

// Array of ids
var divIds = ['div1','div2','div3','div4'];
function Add(){ 
divIds.forEach(function(item){  // loop & add html string to each of element
 document.getElementById(''+item+'').innerHTML ="<br><br><input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
})
}

//input.parentNode.childNodes will retun array of 4 elements, 2 br and 2 input
// need to remove first input
function removeRow(input) { 
   input.parentNode.childNodes[2].remove();
}

JSFIDDLE

答案 4 :(得分：0)

试试这个：

            <html>
            <head>
            <title>Dynamic Form</title>
            <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
            <style>
            #Wrapper {
                width: 90%;
                margin: 0 auto;
            }

            #div1 {
                float: left;
                width: 20%;
                background: lightblue;
            }

            #div2 {
                float: left;
                width: 20%;
                background: lightyellow;
            }

            #div3 {
                float: left;
                width: 20%;
                background: lightgray;
            }

            #div4 {
                float: left;
                width: 20%;
                background: lightblue;
            }

            #ClearFix {
                clear: both;
            }
            </style>
            </head>
            <body>


                <button onclick="Add()">Add TextBox</button>

                <div id="Wrapper">
                    <div id="div1">
                        <p>This is Div one</p>
                    </div>

                    <div id="div2">
                        <p>This is Div two</p>
                    </div>

                    <div id="div3">
                        <p>This is Div three</p>
                    </div>

                    <div id="div4">
                        <p>This is Div Four</p>
                    </div>

                    <div id="ClearFix"></div>
                </div>

                <script>
                                function Add()
                                {
                                    div1.innerHTML += "<br><br> <input type='text' name='mytext' id='input_div1'>"+"<input type='button' id='div1' value='Delete' onclick='removeRow(this)'>";
                                    div2.innerHTML += "<br><br> <input type='text' name='mytext' id='input_div2'>"+"<input type='button' id='div2' value='Delete' onclick='removeRow(this)'>";
                                    div3.innerHTML += "<br><br> <input type='text' name='mytext' id='input_div3'>"+"<input type='button' id='div3' value='Delete' onclick='removeRow(this)'>";
                                    div4.innerHTML += "<br><br> <input type='text' name='mytext' id='input_div4'>"+"<input type='button' id='div4' value='Delete' onclick='removeRow(this)'>";
                                }

                                function removeRow(input)
                                {
                                        var id = $(input).attr("id");
                                        $('#input_'+id).remove();
                            //          $('#'+id).remove();
                                }
                                </script>
            </body>
            </html>

答案 5 :(得分：0)

此代码适合您。在您的javascript中进行这些更改

// Array of ids
var divIds = ['div1','div2','div3','div4'];
function Add(){ 
   divIds.forEach(function(item){  
   // loop & add html string to each of element
   document.getElementById(''+item+'').innerHTML ="<br><br><input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
 })
}
function removeRow(input) { 
   input.parentNode.childNodes[2].remove();  // removes text box
   input.parentNode.childNodes[3].remove();  // removes delete button
}
相关问题
最新问题