Как использовать jquery для удаления элемента после его перемещения - PullRequest
Новая
       6

Как использовать jquery для удаления элемента после его перемещения

0 голосов
/ 10 ноября 2019

Я хочу динамически создавать, удалять div, который будет перемещаться после создания.

1) Это похоже на работу после создания / удаления. Если просто делать создание / удаление несколько раз, div «hello-id» не появляется в. (Может быть, нет ... удаленный элемент появится снова. См. Шаг # 2) 

// HTLM
<body>
   <div id='insert1'>
      <div id='insert2'>
      </div>
   </div>
</body>

// Javascript
$("body").append($("<div id='hello-id'>hello</div>"));
$('#hello-id').remove()


// HTML after create/delete. Correct! 'hello-id' div is removed 
// from <body>. It can't be found. 
<body>
   <div id='insert1'>
      <div id='insert2'>
      </div>
   </div>
</body>

2) Это не работает, если перемещен элемент «hello-id». Он не может быть удален после перемещения. Кроме того, удаленные элементы на шаге # 1 будут отображаться снова, и количество появлений зависит от циклов создания / удаления. 

// HTLM
<body>
   <div id='insert1'>
      <div id='insert2'>
      </div>
   </div>
</body>

// Javascript
$("body").append($("<div id='hello-id'></div>"));
$('#hello-id').insertBefore($('#insert2'));
//$('hello-id').remove()

// HTML after. Assume #1 is performed with 1 cycle.  'hello-id' div 
// is removed from <body>. 
// 2 'hello-id' div show up. BUT, it should be 1!
<body>
   <div id='insert1'>
      <div id='hello-id'>
      </div>
      <div id='hello-id'>
      </div>
      <div id='insert2'>
      </div>
   </div>
</body>

3) Выполните удаление. Но осталось 1. 

// Javascript
$('#hello-id').remove()

// HTML
<body>
   <div id='insert1'>
      <div id='hello-id'>
      </div>
      <div id='insert2'>
      </div>
   </div>
</body>

Я уверен, что создание / удаление выполняется в паре на шаге № 1. Кстати, во время процесса выполняются Jquery $ ('hello-id'). Show (), $ ('hello-id'). Hide ().

Что не так с функцией удаления Jquery ()если элемент перемещается?

Ответы [ 2 ]

0 голосов
/ 10 ноября 2019

Хорошо, я думаю, что у меня проблема сейчас.

Каждый раз, когда вы выполняете это: 

$("<div id='hello-id'></div>");

jQuery создаст новый элемент, так что вы получите дублированный div сid = "hello-id".

Вам нужно сохранить этот элемент в переменной и добавить переменную, примерно так: 

var divHello = $("<div id='hello-id'></div>");

// Step 1
$("body").append(divHello);
$('#hello-id').remove();

// Step 2
$("body").append(divHello);
$('#hello-id').insertBefore($('#insert2'));

// Step 2 again (should not duplicate now)
$("body").append(divHello);
$('#hello-id').insertBefore($('#insert2'));

// Step 3 (now you'll be able to remove, just because there is only one div hello-id)
$('#hello-id').remove();

Таким образом (вместо этого добавляется переменная divHello "$() "jQuery selector), вы не создадите новый div" hello-id ", он просто" поместит "и" переместит "существующий div" hello-id "в html.

Дайте мне знатьесли это решило проблему.

0 голосов
/ 10 ноября 2019

Я пробовал ваш код, и он работал нормально. кстати, в ваших примерах отсутствуют # в $ ('# hello-id') и $ ('# insert2'), посмотрите, не в этом ли ваша проблема ... 

$("body").append($("<div id='hello-id'>Hello</div>"));
$('#hello-id').insertBefore($('#insert2'));
$('#hello-id').remove();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
   <div id='insert1'>
      <div id='insert2'>
      </div>
   </div>
</body>

... Если проблема не в том, что "#", поэтому я заметил, что в вашем случае дублируется тег: 

<div id='hello-id'></div>

Но в приведенном выше фрагменте кода он не дублируется и работает, возможно, это проблема с версией.

Но дело в том, что вы «не можете» иметь 2 или более элементов с одинаковым «идентификатором». "в вашей DOM, поэтому, если у вас есть 2 элемента с одинаковым идентификатором, jquery удалит только один.

Это можно исправить двумя способами:

1 -Попробуйте другую версию jQuery, чтобы посмотреть, перестанет ли div id = 'hello-id' дублироваться, если да, ваш код, вероятно, будет работать.

2 - вы можете установить класс вместо id: 

<div class='hello-class'></div>

Таким образом, когда вы удаляете "$ ('. Hello-class'). Remove ();", jquery удаляет все элементы с этим же классом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...