How To Delete The Textbox Dynamically In A DIV Using Javascript

January 31, 2023 Post a Comment

How to Delete the TextBox in a DIV using javascript. First I created the four column in a div and I created the checkbox dynamically using the Add button in a div. What is my probl

Solution 1:

Try this working snippet.

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

Solution 2:

There are many undefined variables in your code.Hope you are trying to refer to the 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

Solution 3:

Try this :

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

Solution 4:

This code will work for you. Make these changes in your 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
}

Solution 5:

Edit your removeRow() function to be like this:

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

This removes just the input box and leaves the delete button, as you want it to.

Edit

To remove both the input box and the button:

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

Html5 Code Review