JavaScriptを使用してDIVでテキストボックスを動的に削除する方法

javascriptを使用してDIV内のTextBoxを削除する方法最初にdivの4つの列を作成し、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

は私にあなたが（追加で未解決の変数を持つ –

溶液を得てください）FUNC。 .. – 3rdthemagical

あなたは自分の入力をラップし、一つの容器内のボタンを削除する必要があり、DIVを言うことができます。もここ

<!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機能は実施例である。第二のパラメータを渡します

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

これは単に入力ボックスを削除し、あなたはそれがしたいと、削除ボタンを残し：。このようなことする

出典

2016-07-27 10:03:22

ya 2列目の削除コードを追加すると、最初の列でのみ発生します。行が削除されていないことを意味します。 –

@raji kumarJustはremoveRowの2番目のパラメータを追加しました（this、this.parentNode .parentNode）関数です。それは今すぐ正しく動作します –

編集しremoveRow()機能

編集

入力ボックスとボタンの両方を削除するには：

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

出典

2016-07-27 10:04:58

私の必要条件は何ですか？削除ボタンをクリックすると、行全体が削除される必要がありますので、私に解決策を教えてください。 –

@rajikumar、テキストボックスとボタン自体を含むすべて？ –

ya everythinはテキストボックスに含まれていました。削除ボタンitselt –

あなたはid

を参照しようとしているあなたのcode.Hopeの多くの未定義の変数があります。

// 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のソリューションしか必要としません。 –

このコードは、あなたのために動作します。、DIV1、DIV2：それはplzは機能していないあなたの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でテキストボックスを動的に削除する方法

答えて

関連する問題