如何从div级别删除动态生成的字段？

时间：2016-12-03 08:14:30

标签： javascript php jquery html css

我的概念是在按钮点击“添加”时创建最多20个块（它包含一些输入字段），如果点击“添加”按钮，则可以添加新块，即成功完成。现在我想删除在“添加”按钮单击时创建的块。

例如：如果用户在“ADD”按钮中使用创建5块。如果用户点击“减号”按钮，则在块2中，应该从列表中删除块2，并且应该相应地更新块的计数。enter image description here http://www.w3schools.com/code/tryit.asp?filename=FADO51NINJMD 

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        var i = 1;
        $(document).ready(function () {
            $("#commentForm").validate();
        });
        function add()
        {   
            var objTo = document.getElementById('room_fileds')
            var divtest = document.createElement("div");
            var label = document.createElement('label');
            label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" value="Minus" onclick="minus()"></h5>';
            divtest.appendChild(label);
            var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
            var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
            var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
            length.appendTo(divtest);
            attribute.appendTo(divtest);
            column.appendTo(divtest);
            objTo.appendChild(divtest);
            i++
        }

        function minus()
        {   
        }


    </script>
</head>
<body>
    <form id="commentForm" method="post" action="">
        <div id="room_fileds">
       Static Field
            <input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length"  class="form-control required">
             <input type="text" name="Attribute" id="Attribute"  placeholder="Field 1 Attribute" class="form-control" required>
              <select name="Column" id="Column" class="required" >
              <option selected  value="">Field Column </option>
              <option value="1">YES</option>
              <option value="2">NO</option>
              </select>
              </div>
              <br><br>
    <input class="submit" type="submit" value="Submit1">
    <input type="button" value="Add" onclick="add()">
</form>
</body>
</html>

3 个答案:

答案 0 :(得分：1)

创建id节点

时设置div 
divtest.setAttribute("id", "div" + i);

minus function

中id传递已创建的onclick号码 
label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" onclick="minus('+i+')" value="Minus"></h5>';

并将minus function设为

function minus(_id)
{
    var _div_id = "div" + _id;
    var _div_elem = document.getElementById(_div_id);
    _div_elem.parentNode.removeChild(_div_elem);
}


var i = 1;
$(document).ready(function () {
	//$("#commentForm").validate();
});
function add()
{   
	var objTo = document.getElementById('room_fileds')
	var divtest = document.createElement("div");
	divtest.setAttribute("id","div" + i);
    
	var label = document.createElement('label');
	label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" onclick="minus('+i+')" value="Minus"></h5>';
    
	divtest.appendChild(label);
	var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
	var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
	var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
	
	length.appendTo(divtest);
	attribute.appendTo(divtest);
	column.appendTo(divtest);
	objTo.appendChild(divtest);
	i++
}
			
function minus(_id)
{
	var _div_id = "div" + _id;
	var _div_elem = document.getElementById(_div_id);
	_div_elem.parentNode.removeChild(_div_elem);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form id="commentForm" method="post" action="">
		<div id="room_fileds">Static Field
			<input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length"  class="form-control required">
			<input type="text" name="Attribute" id="Attribute"  placeholder="Field 1 Attribute" class="form-control" required>
			<select name="Column" id="Column" class="required" >
				<option selected  value="">Field Column </option>
				<option value="1">YES</option>
				<option value="2">NO</option>
				</select>	
			</div><br><br>
		<input class="submit" type="submit" value="Submit1">
		<input type="button" value="Add" onclick="add()">
	</form>

答案 1 :(得分：0)

您可以在点击时删除标签父级。请参阅减函数内容。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        var i = 1;
        $(document).ready(function () {
            $("#commentForm").validate();
        });
        function add()
        {   
            var objTo = document.getElementById('room_fileds')
            var divtest = document.createElement("div");
            var label = document.createElement('label');
            label.innerHTML = '<h5 class="label">Block '+i+'<input type="button" value="Minus" onclick="minus()"></h5>';
            divtest.appendChild(label);
            var length = $('#Length').clone().attr('id', 'Length' + i).attr('name', 'Length' + i);
            var attribute = $('#Attribute').clone().attr('id', 'Attribute' + i).attr('name', 'Attribute' + i);
            var column = $('#Column').clone().attr('id', 'Column' + i).attr('name', 'Column' + i);
            length.appendTo(divtest);
            attribute.appendTo(divtest);
            column.appendTo(divtest);
            objTo.appendChild(divtest);
            i++
        }

        function minus()
        {   
            //This is the clicked label, so we remove the parent (the div)
            $(this).parent().remove();
        }


    </script>
</head>
<body>
    <form id="commentForm" method="post" action="">
        <div id="room_fileds">
       Static Field
            <input type="text" name="Length" maxlength="2" id="Length" onkeypress="return isNumberKey(event);" placeholder="Field 1 Length"  class="form-control required">
             <input type="text" name="Attribute" id="Attribute"  placeholder="Field 1 Attribute" class="form-control" required>
              <select name="Column" id="Column" class="required" >
              <option selected  value="">Field Column </option>
              <option value="1">YES</option>
              <option value="2">NO</option>
              </select>
              </div>
              <br><br>
    <input class="submit" type="submit" value="Submit1">
    <input type="button" value="Add" onclick="add()">
</form>
</body>
</html>

答案 2 :(得分：0)

<div class="removePhoneDiv">
    <input type="button" value="Add Text Field" id="add_button" >
      <ul style="list-style:none;"  id="phoneNumberList">
          <li class='Textbox1' style="float:left;width:100%;">
              <div style=" margin-top: 2%; " class='form-group' id='answerdiv'>
                   <input type='text' class='input_phone  form-control1'>
                       <img style="float:left;" src="images/close.png" class="remove_phone_number">
               </div>
           </li>
     </ul>
</div>

 <script>

                                var wrapper = $(".form-group");

                                $("#add_button").click(function (e) {
                                    e.preventDefault();
                                    $("#phoneNumberList").append("<li class='Textbox1'><div class='form-group' id='answerdiv'><input type='text' class='form-control1' ><img  src=\"images/close.png\" class=\"remove_phone_number\"></div></li>");
                                });

                                $(".removePhoneDiv").on("click", ".remove_phone_number", function (e) {
                                    e.preventDefault();
                                    $(this).parent('div').parent('li').remove();
                                })
                            </script>
相关问题
最新问题