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

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

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

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

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); 
 
}

#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; 
 
}

<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>

来源

2016-07-27 raji kumar

你拨弄https://jsfiddle.net/u7gdatgj/ – 3rdthemagical

它不PLZ工作给我一个解决方案 –

您在添加有未解决的变量（）FUNC：DIV1，DIV2。 .. – 3rdthemagical

你只需要包装你的输入，在一个容器中删除按钮，可以说股利。在

<!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>

removeRow功能这里亦通的第二参数是工作示例。

来源

2016-07-27 10:03:22

雅它只会发生在第一列如果添加第二列的删除代码意味着该行没有被删除所以请给我一个解决方案 –

@raji kumarJust在removeRow中添加了第二个参数（this，this.parentNode .parentNode）功能。它现在工作正确 –

编辑您的removeRow()功能是这样的：

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

这只是删除输入框和叶删除按钮，只要你想它。

编辑

删除这两个输入框和按钮：

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

来源

2016-07-27 10:04:58

嘿che-azeh我的要求是什么，如果我点击删除按钮意味着整个行需要删除所以请给我一个解决方案 –

@rajikumar，一切都包括文本框和按钮本身？ –

雅everythin被列入文本框和删除按钮itselt –

，我们在您code.Hope许多不确定的变量，你正在试图指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

来源

2016-07-27 10:07:29 brk

试试这个工作片段。

// 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; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 

 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <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> 
 

 
</body> 
 

 
</html>

来源

2016-07-27 10:10:59 cheralathan

试试这个：

  <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>

来源

2016-07-27 10:14:41 Roma

我只需要在JavaScript解决方案，所以请给我一个解决方案在JavaScript –

该代码会为你工作。做出这些改变在你的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 
}

来源

2016-07-27 10:21:14

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

回答

相关问题