div 수준에서 동적으로 생성 된 필드를 제거하는 방법은 무엇입니까?

Nithya

내 컨셉은 "추가"버튼을 클릭하면 최대 20 개의 블록 (일부 입력 필드 포함)을 생성하는 것입니다. "추가"버튼을 누르면 새 블록이 추가 될 수 있으며 성공적으로 완료되었습니다. 이제 "추가"버튼 클릭시 생성 된 블록을 제거하고 싶습니다.

예 : 사용자가 "ADD"버튼을 사용하여 5 개의 블록을 생성 한 경우. 사용자가 블록 2에서 "마이너스"버튼을 탭하면 블록 2가 목록에서 제거되고 그에 따라 블록 개수가 업데이트되어야합니다. 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>
자히드 주 헤르

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

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

jQuery 동적으로 생성 된 div에서 동적으로 생성 된 요소를 추가 / 제거하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 div 안에 이미지를 추가하는 방법은 무엇입니까?

분류에서Dev

Javascript / jquery에서 동적으로 생성 된 div 요소에 액세스하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 DIV ID의 CSS를 변경하는 방법은 무엇입니까?

분류에서Dev

그리드에서 동적으로 생성 된 필드를 필터링하고 정렬하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 뷰를 수직으로 정렬하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 입력에서 양식 데이터를 POST하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트 : 동적으로 생성 된 div를 숨기는 방법은 무엇입니까?

분류에서Dev

TextView Array에서 동적으로 생성 된 textview를 별도로 처리하는 방법은 무엇입니까?

분류에서Dev

AngularJS에서 동적으로 생성 된 드롭 다운 옵션을 제거하는 방법은 무엇입니까?

분류에서Dev

각 요소에서 동적으로 생성 된 이벤트 리스너를 제거하는 방법은 무엇입니까?

분류에서Dev

Java에서 동적으로 생성 된 요소를 다시 호출하는 방법은 무엇입니까?

분류에서Dev

QWebView에서 동적으로 생성 된 이미지를 표시하는 방법은 무엇입니까?

분류에서Dev

window.location.href에서 동적으로 생성 된 ID를 사용하는 방법은 무엇입니까?

분류에서Dev

조건문에서 동적으로 생성 된 JavaScript 객체를 사용하는 방법은 무엇입니까?

분류에서Dev

Angular 2에서 동적으로 생성 된 양식 필드를 개체에 바인딩하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 요소 (LI)에 ondragstart =“drag (event)”를 추가하는 방법은 무엇입니까?

분류에서Dev

Vaadin UI에 동적으로 생성 된 SVG를 포함하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 객체를 문자열에 할당하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 ID를 jQuery에 전달하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 링크를 클릭하여 해당 링크에서 새 동적 페이지를 생성하는 방법은 무엇입니까?

분류에서Dev

PHP에서 여러 수준의 탭과 모듈을 사용하여 동적으로 생성 된 양식을 제출하는 방법은 무엇입니까?

분류에서Dev

Ruby에서 클래스 변수를 혼합 모듈의 동적으로 생성 된 클래스 메서드에 전달하는 방법은 무엇입니까?

분류에서Dev

mysql과 동일한 쿼리에서 수동으로 생성 된 필드를 사용하는 방법은 무엇입니까?

분류에서Dev

이 자바 스크립트에서 동적으로 생성 된 필드의 유효성을 검사하는 방법은 무엇입니까?

분류에서Dev

각도 js에서 동적으로 생성 된 행렬에있는 텍스트 상자 필드에 값을 할당하는 방법은 무엇입니까?

분류에서Dev

클릭 JavaScript로 동적으로 생성 된 div의 배경을 변경하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트에서 동적으로 생성 된 onclick 함수에 인수를 삽입하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 입력 텍스트 필드의 값을 얻는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    jQuery 동적으로 생성 된 div에서 동적으로 생성 된 요소를 추가 / 제거하는 방법은 무엇입니까?

  2. 2

    동적으로 생성 된 div 안에 이미지를 추가하는 방법은 무엇입니까?

  3. 3

    Javascript / jquery에서 동적으로 생성 된 div 요소에 액세스하는 방법은 무엇입니까?

  4. 4

    동적으로 생성 된 DIV ID의 CSS를 변경하는 방법은 무엇입니까?

  5. 5

    그리드에서 동적으로 생성 된 필드를 필터링하고 정렬하는 방법은 무엇입니까?

  6. 6

    동적으로 생성 된 뷰를 수직으로 정렬하는 방법은 무엇입니까?

  7. 7

    동적으로 생성 된 입력에서 양식 데이터를 POST하는 방법은 무엇입니까?

  8. 8

    자바 스크립트 : 동적으로 생성 된 div를 숨기는 방법은 무엇입니까?

  9. 9

    TextView Array에서 동적으로 생성 된 textview를 별도로 처리하는 방법은 무엇입니까?

  10. 10

    AngularJS에서 동적으로 생성 된 드롭 다운 옵션을 제거하는 방법은 무엇입니까?

  11. 11

    각 요소에서 동적으로 생성 된 이벤트 리스너를 제거하는 방법은 무엇입니까?

  12. 12

    Java에서 동적으로 생성 된 요소를 다시 호출하는 방법은 무엇입니까?

  13. 13

    QWebView에서 동적으로 생성 된 이미지를 표시하는 방법은 무엇입니까?

  14. 14

    window.location.href에서 동적으로 생성 된 ID를 사용하는 방법은 무엇입니까?

  15. 15

    조건문에서 동적으로 생성 된 JavaScript 객체를 사용하는 방법은 무엇입니까?

  16. 16

    Angular 2에서 동적으로 생성 된 양식 필드를 개체에 바인딩하는 방법은 무엇입니까?

  17. 17

    동적으로 생성 된 요소 (LI)에 ondragstart =“drag (event)”를 추가하는 방법은 무엇입니까?

  18. 18

    Vaadin UI에 동적으로 생성 된 SVG를 포함하는 방법은 무엇입니까?

  19. 19

    동적으로 생성 된 객체를 문자열에 할당하는 방법은 무엇입니까?

  20. 20

    동적으로 생성 된 ID를 jQuery에 전달하는 방법은 무엇입니까?

  21. 21

    동적으로 생성 된 링크를 클릭하여 해당 링크에서 새 동적 페이지를 생성하는 방법은 무엇입니까?

  22. 22

    PHP에서 여러 수준의 탭과 모듈을 사용하여 동적으로 생성 된 양식을 제출하는 방법은 무엇입니까?

  23. 23

    Ruby에서 클래스 변수를 혼합 모듈의 동적으로 생성 된 클래스 메서드에 전달하는 방법은 무엇입니까?

  24. 24

    mysql과 동일한 쿼리에서 수동으로 생성 된 필드를 사용하는 방법은 무엇입니까?

  25. 25

    이 자바 스크립트에서 동적으로 생성 된 필드의 유효성을 검사하는 방법은 무엇입니까?

  26. 26

    각도 js에서 동적으로 생성 된 행렬에있는 텍스트 상자 필드에 값을 할당하는 방법은 무엇입니까?

  27. 27

    클릭 JavaScript로 동적으로 생성 된 div의 배경을 변경하는 방법은 무엇입니까?

  28. 28

    자바 스크립트에서 동적으로 생성 된 onclick 함수에 인수를 삽입하는 방법은 무엇입니까?

  29. 29

    동적으로 생성 된 입력 텍스트 필드의 값을 얻는 방법은 무엇입니까?

뜨겁다태그

보관