자바 스크립트로 텍스트 필드를 삭제할 수 없습니다.

Question

다른 데이터 항목 목록이있는 웹 페이지가 있습니다. 항목이 포함 된 각 행에는 행 끝에 편집 버튼이있는 여러 값이 표시됩니다. 지금은 각 행을 편집하는 기능을 구현하려고합니다.

내가 원하는 것은 사용자가 편집 버튼을 클릭하면 버튼이있는 행의 여러 필드가 편집 가능한 텍스트 필드가됩니다. 사용자가 버튼을 다시 클릭하면 (이름이 '저장'으로 변경됨) 텍스트 필드는 편집 할 수없는 텍스트로 다시 바뀝니다.

나는이 권리의 첫 부분을가집니다. 그러나 텍스트 필드를 일반 텍스트로 변환하려고하면 텍스트 필드가 그대로 유지되고 텍스트 필드가 사라집니다. 여기

var App = 
    { 
     editing_list: false, 
     default_text: 'hello world!', 
     edit_element: null, 
     editing_html: 
      "<textarea name= \"expiration_date\">list expiration date</textarea>", 
     normal_html: 
      "<td name= \"expiration_date\">list expiration date</td>", 
    }; 

function on_edit_button_click() 
{ 
    if(App.editing_list) 
    { 
     $("textarea[name=expiration_date]").html(App.normal_html); 
     $(this).html("edit"); 

     App.editing_list = false; 
    } 
    else 
    { 
     $("td[name=expiration_date]").html(App.editing_html); 
     $(this).html("save"); 

     App.editing_list = true; 
    } 
} 

$(document).ready(function() 
{ 
    init(); 
    $('button').click(on_edit_button_click); 
}); 

function init() 
{ 
    App.edit_element = $("td[name=expiration_date]"); 
    console.log(App.edit_element); 
} 

내 HTML 코드입니다 : 여기 내 자바 스크립트 코드는

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 

<table style="width:300px"> 
    <tr name="list_*id*_row"> 
     <td name="list_name">list name</td> 
     <td name="expiration_date">list expiration date</td> 
     <td><button> edit </button></td> 
    </tr> 
</table> 

Answer 1

당신이 "저장"버튼을 클릭하면 코드가 "텍스트 영역"로 변경하려고하는 HTML $("textarea[name=expiration_date]")

표 셀 $("td[name=expiration_date]")으로 변경하면 제대로 작동합니다.

Answer 2

Here's a JSFiddle that demonstrates what you seemed to be asking about.

원본 예제 코드를 실행할 때 HTML 요소를 검사하면 "편집"버튼을 처음 클릭 할 때 실제로 코드가 <td> 요소를 제거하지 않는다는 것을 알아야합니다. 그것은 입니다. <textarea> 요소 안에는입니다.

내 예제 코드에서 한 가지 중요한 차이가 나는 (문서에 따라 그냥 연결되는) 것 html 함수로 the jQuery function replaceWith으로 jQuery function html의 사용을 대체한다는 것입니다 :

HTML을 가져 내용을 정합 소자들의 세트의 첫 번째 요소의 또는 HTML 콘텐츠를 모든 유사한 요소 세트. "[강조 광산]

I 또한 추가 ed 코드를 사용하여 textarea 및요소가 교체되기 전에 기존 내용을 저장하여 새 요소의 내용을 대체 된 요소와 동일한 값으로 업데이트 할 수 있습니다. 이 코드에 다른 곳에서 정의되지 않기 때문에 나는 또한 귀하의 예제에서 init(); 함수 호출을 제거

var App = 
    { 
     editing_list: false, 
     default_text: 'hello world!', 
     edit_element: null, 
     editing_html: 
      "<textarea name=\"expiration_date\">editing</textarea>", 
     normal_html: 
      "<td name=\"expiration_date\">normal</td>", 
    }; 

function on_edit_button_click() 
{ 
    if(App.editing_list) 
    { 
     var $textArea = $("textarea[name=expiration_date]"); 
     var currentValue = $textArea.val(); 
     console.debug(currentValue); 
     $textArea.replaceWith(App.normal_html); 
     $("td[name=expiration_date]").html(currentValue); 
     $(this).html("edit"); 
     App.editing_list = false; 
    } 
    else 
    { 
     var $td = $("td[name=expiration_date]"); 
     var currentValue = $td.html(); 
     console.debug(currentValue); 
     $td.replaceWith(App.editing_html); 
     $("textarea[name=expiration_date]").html(currentValue); 
     $(this).html("save"); 
     App.editing_list = true; 
    } 
} 

$(document).ready(function() 
{ 
    $('button').click(on_edit_button_click); 
}); 

참고 :

다음은 JSFiddle에서 전체 자바 스크립트입니다.

또한 editing_html과 normal_html HTML의 내용이 변경되었지만 내용이 보이지 않습니다 (바뀌었기 때문에).