How To Delete The Textbox Dynamically In A Div Using Javascript

May 30, 2024 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 herefunctionAdd() {
  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)'>";
}

functionremoveRow(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><buttononclick="Add()">Add TextBox</button><divid="Wrapper"><divid="div1"><p>This is Div one</p></div><divid="div2"><p>This is Div two</p></div><divid="div3"><p>This is Div threee</p></div><divid="div4"><p>This is Div Four</p></div><divid="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 idsvar divIds = ['div1','div2','div3','div4'];
functionAdd(){ 
divIds.forEach(function(item){  // loop & add html string to each of elementdocument.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 inputfunctionremoveRow(input) { 
   input.parentNode.childNodes[2].remove();
}

JSFIDDLE

Solution 3:

Try this :

<html><head><title>Dynamic Form</title><scripttype="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><buttononclick="Add()">Add TextBox</button><divid="Wrapper"><divid="div1"><p>This is Div one</p></div><divid="div2"><p>This is Div two</p></div><divid="div3"><p>This is Div three</p></div><divid="div4"><p>This is Div Four</p></div><divid="ClearFix"></div></div><script>
                                function Add()
                                {
                                    div1.innerHTML += "<br><br><inputtype='text'name='mytext'id='input_div1'>"+"<inputtype='button'id='div1'value='Delete'onclick='removeRow(this)'>";
                                    div2.innerHTML += "<br><br><inputtype='text'name='mytext'id='input_div2'>"+"<inputtype='button'id='div2'value='Delete'onclick='removeRow(this)'>";
                                    div3.innerHTML += "<br><br><inputtype='text'name='mytext'id='input_div3'>"+"<inputtype='button'id='div3'value='Delete'onclick='removeRow(this)'>";
                                    div4.innerHTML += "<br><br><inputtype='text'name='mytext'id='input_div4'>"+"<inputtype='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 idsvar divIds = ['div1','div2','div3','div4'];
functionAdd(){ 
   divIds.forEach(function(item){  
   // loop & add html string to each of elementdocument.getElementById(''+item+'').innerHTML ="<br><br><input type='text' name='mytext'>" + "<input type='button' value='Delete' onclick='removeRow(this)'>";
 })
}
functionremoveRow(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:

functionremoveRow(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:

functionremoveRow(input)
{
    input.parentNode.removeChild(input.previousSibling);
    input.parentNode.removeChild(input);
}

Html5 School