JQuery 추가 실행 취소

Question

td 안에 버튼이있는 테이블이 있습니다. 버튼을 누르면 td에 텍스트가 추가됩니다. 버튼을 다시 한번 누르면이 텍스트가 제거됩니다. 이 단추는 테이블에서 여러 번 사용되므로 class 특성을 사용합니다. 이 작업을 수행하는 데 사용할 수있는 방법은 무엇입니까?

$(document).on('click', '.releasebutton', function() { // button class="releasebutton" 
    var label = $(this).text(); 
    if (label == "Add") { // it is "Add" by default 
     $(this).text("Cancel"); 
     $('.ReleaseTD').append("<br>" + "test"); // td class="ReleaseTD" 
    } 
    // the code above this works 
    else { 
     $(this).text("Add"); 
     $('.ReleaseTD').remove("<br>" + "test"); 
     // this obviously is wrong but this is where i would like the correct code 
    }; 
}); 

Answer 1

당신은이 같은 내부 텍스트 ID를 만들 수 있습니다 :

$(document).on('click', '.releasebutton', function() { // button class="releasebutton" 
    var label = $(this).text(); 
    if (label == "Add") { // it is "Add" by default 
     $(this).text("Cancel"); 
     $('.ReleaseTD').append("<span id='textID'><br>" + "test</span>"); 
    } 
    else { 
     $(this).text("Add"); 
     $('#textID').remove(); 
    }; 
}); 

Answer 2

두 가지 방법 :

1)가있는 범위에 텍스트를 추가

이

내 코드입니다 고유 ID를 입력 한 다음이 ID를 h 제하십시오. 예를 들어, 가장 큰 번호의 ID를 삭제하십시오. 멍청한 방법은 글로벌 변수에 최신 ID를 저장하는 것입니다.

var global_last_appended_id = 0; 

$(document).on('click', '.releasebutton', function() { // button class="releasebutton" 
    global_last_appended_id ++; 
    $('.ReleaseTD').append("<span id='appended-text-" + global_last_appended_id + "'><br>" + "test</span>"); 
    } 
    // the code above this works 
    else { 
     $(this).text("Add"); 
     $('#appended-text-' + global_last_appended_id).remove(); 
     global_last_appended_id--; //go one step back so next time we remove the previous paragraph 
    }; 
}); 

업데이트 : 당신의 편집 후 나는 여러 번 취소 할 수있는 기능을 추가했습니다. 기본적으로 무제한 실행 취소가 있습니다.

2) [절름발이 및 틀린] 이전 .html() 요소의 전체 HTML 코드를 전역 변수에 저장하십시오. 필요한 경우 글로 z 변수에서 이전 버전의 텍스트를 복원하십시오.

Answer 3

다음을 시도하십시오

이 내가 단 하나 개의 버튼을 사용하면 내가 바로 작동하지 않을 것입니다 모든 이이 버튼을 추가 할 경우, 작동하는 것 같다

$(document).on('click', '.releasebutton', function() { // button class="releasebutton" 
    var label = $(this).text(); 
    if (label == "Add") { // it is "Add" by default 
     $(this).text("Cancel"); 
     $('.ReleaseTD').append("<span id='txt_name'><br>" + "test</span>"); 
    } 
    // the code above this works 
    else { 
     $(this).text("Add"); 
     $('#txt_name').remove(); 
    }; 
});