요소 수 확인 jQuery

Question

주어진 표 셀에 textarea 개의 요소 수를 얻고 싶습니다. 이를 사용하여 둘 이상의 요소가있는 경우에만 한 번에 하나의 요소에 제거 기능을 추가하고 '실행 취소'링크를 클릭하면 제거 된 textarea을 실행 취소 할 수 있습니다.

<table class="result_table"> 
    <tr valign="middle" align="center"> 
     <td style="font-size:13px; " class="tbody_data side">Dissolution</td> 
     <td valign="middle" align="center" style="padding: 0px;" class="tbody_data"> 
      <input type="hidden" value="2" name="tests[]"> 
      <textarea style="border:none; vertical-align: middle;" class="det_st form-control">UV</textarea> 
     </td> 
     <td style="padding: 0px;" class="tbody_data"> 
      <textarea style="border:none;" class="det_st form-control">USP 38 NF 33 Page 4635</textarea> 
     </td> 
     <td style="padding: 0px;" class="tbody_data"> 
      <textarea style="border:none;" class="det_st form-control">Acid Stage Not more than 10.0% [n=6] 
      </textarea> 
      <textarea style="border:none;" class="det_st form-control">Buffer Stage Not Less than 70.0% [n=6] 
      </textarea> 
     </td> 
     <td style="padding: 0px;" class="tbody_data"> 
      <textarea style="border:none;" class="det_st form-control"> Acid Stage 107.8% (RSD=5.2%; n=6) </textarea> 
      <textarea style="border:none;" class="det_st form-control"> Buffer Stage 102.2% (RSD=0.9%; n=6)</textarea> 
     </td> 
     <td style="padding: 25px; width:50px;" class="tbody_data side"> 
      <select style="border:none; margin:15px; width:145px;" class="select" selected="selected"> 
       <option value="COMPLIES">COMPLIES</option> 
       <option value="COMPLIES">COMPLIES</option> 
       <option value="DOES NOT COMPLY">DOES NOT COMPLY</option> 
      </select> 
      <select style="border:none; margin:15px; width:145px;" class="select" selected="selected"> 
       <option value="COMPLIES">COMPLIES</option> 
       <option value="COMPLIES">COMPLIES</option> 
       <option value="DOES NOT COMPLY">DOES NOT COMPLY</option> 
      </select> 
     </td> 
    </tr> 
</table> 

$(document).on('mouseover', '.result_table tr td', function() { 
    $('textarea', this).dblclick(function() { 
     $(this).remove() 
     alert($(this).length) //gives one even when a cell contains two teatareas 
    }); 
}) 

제안 환영합니다 : 다음 샘플 코드 조각입니다.

Answer 1

당신은 td 세포 내에서 textareas의 수를 계산 원했고, 그것을 제거하는 것이 가능 할 때 :

1. 내에 textareas이 2 개 이상 있습니다.세포.
2. 사용자가 textarea을 두 번 클릭합니다.

은 또한 다시 DOM에 이전 제거 textareas을 넣어, 취소 할 수 있도록 작업을 원했다.

.remove() 대신 .detach()을 사용해야합니다. 이렇게하면 을 다시 사용할 수 있도록 제거한 요소을 저장할 수 있습니다 (실행 취소). 여기

댓글을 설명과 함께 코드입니다 - 마크 업에 난 그냥 가 작업을 취소 그것을 가능하게하는 button를 추가했습니다 :

$(function() { 
    // Initialize an array to store all the removed textareas. 
    var removedTextAreas = [];  

    $(".result_table tr td").on("mouseover", function() { 
     // How many textareas within this cell? 
     var numberOfTextAreas = $("textarea", this).length; 

     // Handle the double click event. 
     handleDblClick(numberOfTextAreas, this); 
    }); 

    $("#undo").on("click", function() { 
     // Is there anything removed and not undone? 
     if (removedTextAreas.length > 0) { 
      // The undo goes from the last to the first in the list. 
      // We always re-attach the last one that has been removed. 
      var itemPos = removedTextAreas.length - 1; 
      var reAttach = removedTextAreas[itemPos]; 
      var previous = reAttach.previous; 
      var next = reAttach.next; 

      if (previous.length > 0) { 
       // The removed element had a sibling before it, 
       // so let's append it back after this sibling. 
       reAttach.textarea.appendTo(reAttach.cell); 
      } 
      else { 
       // The removed element had a sibling after it, 
       // so let's append it back before this sibling. 
       reAttach.textarea.prependTo(reAttach.cell); 
      } 

      // We now can remove this item from the list of 
      // removed textareas. 
      removedTextAreas.splice(itemPos); 
     } 
    }); 

    // Let's separate concerns by creating a function. 
    // This way you can also reduce the code within the caller. 
    function handleDblClick(numberOfTextAreas, el) { 
     // The target for the double click. 
     var target = $("textarea", el); 

     // Let's unbind the double click to start with. 
     target.off("dblclick"); 

     // Two or more textareas? 
     if (numberOfTextAreas >= 2) { 
      target.on("dblclick", function() { 
       // Let's store the removed textarea and some details 
       // to identify its current parent and siblings. 
       removedTextAreas.push({ 
        cell: $(this).closest("td"), 
        previous: $(this).prev("textarea"), 
        next: $(this).next("textarea"), 
        textarea: $(this).detach()      
       }); 
      }); 
     }   
    } 
}); 

Demo

참고 : 당신은 수도 요소를 다시 부착 할 위치를 식별 할 수있는 부분을 약간 조정해야하지만 아이디어를 얻었을 것입니다.

Answer 2

이것은 마우스 오버 콜백 내에서 트릭을 수행해야합니다.

var number_of_textareas = $(this).find('textarea').length; 

Answer 3

당신은 같은 것을 할 수 있습니다

$(document).on('mouseover', '.result_table tr td', function() { 
    $('textarea', this).dblclick(function() { 
    var self = $(this); 
    var nbelement = self.parent('td').find('textarea').length; 
    if (nbelement >= 2) { 
     self.remove() 
    } 
    }); 
}) 

https://jsfiddle.net/Tintin37/z5x4bsuc/