如何使用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中動態刪除文本框

回答

相關問題