Как настроить сложные функции jquery?

Question

У меня есть код html и jquery. Я могу удалить первый li ребенок из ul элемент. Проблема в том, что я могу удалить только один раз и только один элемент. Я хочу сделать так, чтобы пользователь мог удалять элемент каждый раз, когда пользователь нажимает кнопку.

Я не хочу иметь никаких ограничений. или как я могу установить лимиты?

Вот моя разметка:

<ul> 
    <li>Coffee</li> 
    <li>Milk</li> 
    <li>Tea</li> 
</ul> 

<p>List 2:</p> 
<ul> 
    <li>Coffee</li> 
    <li>Milk</li> 
    <li>Tea</li> 
</ul> 

и JavaScript с помощью JQuery:

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("ul li:first").hide(); 
    }); 
}); 

Answer 1

Если вы хотите удалить li элемент на каждой кнопке мыши, вы должны использовать remove() вместо hide()hide() только изменяет видимость элемента, он не удаляет его, а следующий щелчок кнопки будет отмечать тот же самый элемент как скрытый (не имеющий сетевой эффект). См. Документацию: remove() и hide().

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("ul li:first").remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<p>List 2:</p> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<button id="myBtn">Hide</button>

Answer 2

Вот еще одно решение

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     //$("ul li:first").hide(); 
 
     $('ul li:visible:first').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<p>List 2:</p> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<button id="myBtn">Hide</button>

Answer 3

Причина это происходит потому, что при использовании hide()

Он только скрывает элемент, он все еще там. Поэтому, когда вы ссылаетесь на первый из списка, он пытается скрыть() тот, который уже скрыт.

Я думаю, что вы хотите сделать, это удалить первый, а затем, если вы снова выполните эту функцию, он удалит следующую.

Попробуйте remove()

который удаляет элемент.

Так

$("button").click(function(){ $("ul li:first").remove(); } 

Answer 4

вы сказали, что вы хотите удалить, а затем вы можете использовать удалить так:

$(document).ready(function(){ 
     $("button").click(function(){ 
      $("ul li:first-child").remove(); 
     }); 
    }); 

Answer 5

Во-первых,:first селектор Выбор первого элемента.
Вы ищете :first-child Selector, который Выбирает все элементы, которые являются первым дочерним элементом их родителя. Вот почему в сочетании с hide() работает только один раз.

Далее скрыть() является CSS эквивалентно "display", "none"
Если вы хотите обратиться к новому первого ребенку после каждого удаления попробуйте использовать удалить().
Это навсегда удалит ребенка из DOM и позволит вашему коду ссылаться на новейший элемент li.

• Кофе
• Молоко
• Чай

Список 2:

• Кофе
• Молоко
• Чай

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("ul li:first-child").remove(); 
    }); 
}); 

Answer 6

Вы также можете использовать селектор :visible, если хотите скрыть и не удалять его. Это будет искать все видимые только li.

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("ul li:visible:first").hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<p>List 2:</p> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Milk</li> 
 
    <li>Tea</li> 
 
</ul> 
 

 
<button id="myBtn">Hide</button>