dsms
987
2019-10-11 16:30:35
4
413

자바스크립트 컨텍스트 관련 질문


var deleteRow = function () {
$('.deleteRow').on('click', function () {
var $this = $(this);
var rowId = $this.attr('class');
var $rowId = $('.'+rowId);

$rowId.remove();

resetOrderRow();
});
};

// 대표자 정보 추가 버튼
var addRow = function(){
$('.addRow').on('click', function () {
var $htmlElement = $('#repRow').clone().children();

$('#repTbody').append($htmlElement);
deleteRow();
resetOrderRow();
});
};

var resetOrderRow = function () {
var $repRow = $('.repRow:visible');
var repNo = 0;

$.each($repRow, function(index, item){
var $item = $(item);
if(index%2 !== 1){
++repNo;
}

$item.addClass('rep'+repNo);
$item.find('.repRowIndex').html(repNo);
$item.find('#repNo').val(repNo);
});
};




위와같은 admin 페이지가 있습니다.


요건은 


대표자는 복수이며, 위에서부터 순번이 정해지고

추가버튼을 누를때마다 대표자정보란이 추가되고

삭제를 누르면 순번이 재정렬됩니다.


현재 테스트 중 삭제를 하면


삭제하는 row 의 하위까지 모두 삭제됩니다.

1번 부터 5번까지 5개의 row가 있다면

3번삭제를 클릭하면 3,4,5가 삭제됩니다.


현재 deleteRow실행시 row를 삭제하고 resetOrderRow 함수가 실행되는데

3번을 삭제하면 4번이 3번이 되서 삭제되고, 5번이 4번되었다가 3번이되서 삭제되고...

이런식으로 재귀삭제가 발생합니다.


함수를 수정해서 고칠생각인데

이 현상에 대해 좀 알고 싶은데 키워드 같은것좀 공유 부탁 드립니다. 


0
  • 답변 4

  • 바히
    617
    2019-10-11 16:52:30

    아래 대표자 정보 추가버튼시 deleteRow 이벤트 리스너 메소드 실행해주고 계신데..

    deleteRow 메소드가 문제인것 같습니다.

    // 대표자 정보 추가 버튼
    var addRow = function(){
    $('.addRow').on('click', function () {
    var $htmlElement = $('#repRow').clone().children();

    $('#repTbody').append($htmlElement);
    deleteRow();
    resetOrderRow();
    });
    };

    .deleteRow Class 어느 버튼이든 클릭하게되면 해당 Class선택자로 모두 삭제하게 되어있는것 같네요.

    $rowId.remove(); // class="deleteRow" 엘리먼트 모두 삭제.

    생성할 때 유니크한 Class로 생성하시게된다면 id값으로 지정해주는게 나을것 같네요.

    var deleteRow = function () {
    $('.deleteRow').on('click', function () {
    var $this = $(this);
    var rowId = $this.attr('class');
    var $rowId = $('.'+rowId);

    $rowId.remove();

    resetOrderRow();
    });
    };



  • dsms
    987
    2019-10-11 16:57:34

    사실 deleteRow 함수는 

    var deleteRow = function () {
    $('.deleteRow').on('click', function () {
    var $this = $(this);
    var rowId = $this.parents('td').parents('tr').attr('class');
    var $rowId = $('.'+rowId.substring(7));

    $rowId.remove();

    resetOrderRow();
    });
    };

    요렇게 생겼습니다. 


    rowId는 버튼마다 다르게 생성되구요. 혼란을 드려 죄송해요





  • 바히
    617
    2019-10-11 17:01:34 작성 2019-10-11 17:01:55 수정됨

    결과는 동일 할것 같네요.

    var rowId = $this.parents('td').parents('tr').attr('class');
    $this.parents('td') 현재 클릭한 부모 TD엘리먼트 선택.
    .parents('tr') 부모에 tr선택 .attr('class'); 그에 해당하는 class값을 가져오고 있는데 
    해당 tr에 class값은 동일한게 아닌가요?

  • dsms
    987
    2019-10-11 17:13:19
    var resetOrderRow = function () {
    var $repRow = $('.repRow:visible');
    var repNo = 0;

    $.each($repRow, function(index, item){
    var $item = $(item);
    if(index%2 !== 1){
    ++repNo;
    }

    $item.addClass('rep'+repNo);
    $item.find('.repRowIndex').html(repNo);
    $item.find('#repNo').val(repNo);
    });
    };

    에서 class를 뒷자리를증가시켜서 넣어주고 있어서 다른 class값을 가지고 있어요. 로그랑 html에서 확인했습니다


  • 로그인을 하시면 답변을 등록할 수 있습니다.