javascript - On "enter" make input element dissapear in the cell, but leave the text content -

i want change cell content javascript. when click on cell input element appears takes value of cell's text. after editing text in input element when click enter want cell normal again (without having input element).

here table:

<table> <tr> <td>content 1</td> <td>content 2</td> <td>content 3</td> </tr> <tr> <td>content 4</td> <td>content 5</td> <td>content 6</td> </tr> </table> 

here javascript:

$("td").click(function(){   if($(this).find("input").length==0){     var cellcontent = $(this).html();     $(this).empty();     $(this).append("<input type='text' size='"+cellcontent.length+"' value='"+cellcontent+"'>");     $(this).find("input").focus(); }});// part creates input element in cell  

now problem comes after pressing enter when new content should stay in cell without input element.

$("td").click(function(){   var newcellcontent = $("input",this).val();   console.log(newcellcontent);   $("input").keyup(function(event){     if(event.which == 13){       $(this).empty();       $(this).html(newcellcontent);     }     newcellcontent = $("input",this).val();   }); }); 

this have do

$(function(){  $("table td").on('click',function(){     if($(this).find("input").length==0){     var cellcontent = $(this).html();     $(this).empty();     $(this).append("<input type='text' size='"+cellcontent.length+"' value='"+cellcontent+"'>");     $(this).find("input").focus(); }  }); 

note: how storing td object in variable first before using in keyup function. need use remove() function remove element.

 var newcellcontent = $("input",this).val();         var tdobject = $(this); 

====================================================================

    $('table td').on('keyup',function(){   var newcellcontent = $("input",this).val();         var tdobject = $(this); //storing td object in variable   $("table td input").keyup(function(event){     if (event.keycode == 13) {         console.log($(this).val());       $(this).remove(); // remove() removes html element in case input elem       tdobject.html(newcellcontent);     }     newcellcontent = $("input",this).val();   });      });  }); 

check out fiddle link

your references:

jquery docs remove()