Сложность Удаление элемента Div через JQuery

У меня возникли проблемы с удалением элемента, который динамически добавляется в DOM. Все в сценарии ниже работает так, как предполагается, за исключением метода remove внутри обработчика mouseleave. Я предполагаю, что я делаю ошибку с селектором CSS, но я не уверен, что это такое. Любая помощь будет высоко ценится!Сложность Удаление элемента Div через JQuery

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Index</title> 
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 


    <script type="text/javascript"> 
     $(function() 
     { 
      $('#myTr').mouseenter(function() 
      { 
       var cell1 = $(this).children(':first'); 
       cell1.css('position', 'relative'); 
       var myDiv = document.createElement('div'); 
       var myChildDiv = document.createElement('div'); 
       myChildDiv.style.position = 'absolute'; 
       myChildDiv.style.height = '20px'; 
       myChildDiv.style.width = '30px'; 
       myChildDiv.style.opacity = '0.6'; 
       myChildDiv.style.background = 'grey'; 
       $(cell1).prepend(myDiv); 
       $(myDiv).append(myChildDiv); 
      }) 
      .mouseleave(function() 
      { 
       $(this).remove('td:first-child>div'); 
      }); 
     }); 
    </script> 

</head> 

<body> 
<table> 
    <tbody> 
     <tr id="myTr"> 
      <td style="width: 200px;"> 
       Anytown, MA 
      </td> 
     </tr> 

    </tbody> 
</table> 
</body> 
</html>

источник

2012-01-18 Andrew

Вы можете поместить элемент, создать в переменную в области вашей функции, а затем просто вызвать remove() на ней ... У этого есть adde d не нужно использовать селекторов css, чтобы найти его снова.

$(function() 
    { 
     var myDiv; 
     $('#myTr').mouseenter(function() 
     { 
      var cell1 = $(this).children(':first'); 
      cell1.css('position', 'relative'); 
      myDiv = document.createElement('div'); 
      var myChildDiv = document.createElement('div'); 
      myChildDiv.style.position = 'absolute'; 
      myChildDiv.style.height = '20px'; 
      myChildDiv.style.width = '30px'; 
      myChildDiv.style.opacity = '0.6'; 
      myChildDiv.style.background = 'grey'; 
      $(cell1).prepend(myDiv); 
      $(myDiv).append(myChildDiv); 
     }) 
     .mouseleave(function() 
     { 
      $(myDiv).remove(); 
     }); 
    });

источник

2012-01-18 22:17:42

попробовать сделать это жить

.live('mouseleave', function() 
{ 
    $(this).remove('td:first-child>div'); 
});

DOM-динамически генерируется, так что жить будет захватить его, когда он сделал

источник

2012-01-18 22:10:13

Есть случайные подводные камни и предостережений при попытке пересечь DOM с помощью Детские отношения jQuery. Например, даже если он фактически не присутствует, всегда есть элемент TBODY, охватывающий внутреннюю информацию таблицы. Поэтому я стараюсь избегать ситуаций, когда мне приходится беспокоиться об этом. Поскольку вы имеете дело с тем, что по существу является ситуацией наведения мыши, может быть проще просто сохранить ваш элемент myChildDiv в глобальной переменной, а затем просто вызвать myChildDiv.remove() в событии mouseleave.

EDIT: Похоже, zzzrByte уже рекомендовал это, но я оставлю свой ответ просто потому, что он описывает, что может вызвать проблему в первую очередь.

источник

2012-01-18 22:13:15

Это должно быть

$("td:first > div", $(this)).remove();

источник

2012-01-18 22:13:26

Я бы просто использовать создание объекта JQuery в:

var cell1 = $(this).children(':first'); 
cell1.css('position', 'relative'); 

var myDiv = $('<div />'); 
var myChildDiv = $('<div />'); 

myChildDiv.css({ 
    'position': 'absolute', 
    'height': '20px', 
    'width': '30px', 
    'opacity': '0.6', 
    'background-color': 'grey' 
}); 

$(cell1).prepend(myDiv); 
$(myDiv).append(myChildDiv);

И использовать этот mouseleave:

$('td:first > div', this).remove();

источник

2012-01-18 22:15:36 Blender

Спасибо за рекомендации! Я не часто использую этот синтаксис, но он выглядит намного чище, чем то, что я написал! – Andrew

Просто вопрос конвенции. Единственное различие заключается в том, что я создаю объект jQuery (поэтому вы можете назначить ему событие .click() »). Объекты элемента DOM "не делают этого, если вы не обернете их в функцию jQuery' $() '. – Blender

Сложность Удаление элемента Div через JQuery

ответ

Смежные вопросы