Удаление тэгов, содержимого и атрибутов в jQuery

Удаление тэгов, содержимого и атрибутов в jQuery

jQuery предоставляет несколько методов, таких как empty(), remove(), unwrap() и removeAttr() чтобы удалить существующие HTML-элементы (тэги), содержимое тэгов или их атрибуты. Давайте рассмотрим подробнее, как работает каждый из этих методов.

Метод jQuery empty()

Метод jQuery empty() удаляет из DOM все дочерние элементы и текстовое содержимое в выбранных элементах. Он буквально «опустошает» заданный элемент.

Следующий пример удалит все содержимое внутри элементов с классом .container по нажатию кнопки.

<script type="text/javascript">
  $(document).ready(function(){
    // Удалить все из контейнера
    $("button").click(function(){
      $(".container").empty();
    });
  });
</script>

Метод jQuery remove()

Метод jQuery remove() удаляет выбранные элементы из DOM, а также все внутри него. В дополнение к самим элементам удаляются все связанные события и данные jQuery, связанные с элементами.

В следующем примере удаляются все элементы <p> с классом .hint из DOM при нажатии кнопки. Вложенные элементы внутри этих абзацев также будут удалены.

<script type="text/javascript">
  $(document).ready(function(){
    // Удаляет все параграфы с классом hint
    $("button").click(function(){
      $("p.hint").remove();
    });
  });
</script>

Метод jQuery remove() также может включать селектор в качестве необязательного параметра, который позволяет фильтровать удаляемые элементы. Например, код удаления предыдущего примера можно переписать следующим образом:

<script type="text/javascript">
  $(document).ready(function(){
    // Удаляет все параграфы с классом hint
    $("button").click(function(){
      $("p").remove(".hint");
    });
  });
</script>

Метод jQuery unwrap()

Метод jQuery unwrap() удаляет родительские элементы выбранных элементов из DOM. unwrap() это метод, обратный методу wrap(), с которым мы познакомились в предыдущем уроке.

Следующий пример удалит родительский элемент тэга <p> при нажатии кнопки.

<script type="text/javascript">
  $(document).ready(function(){
    // Удалить редительские элементы параграфа
    $("button").click(function(){
      $("p").unwrap();
    });
  });
</script>

Метод jQuery removeAttr()

Метод jQuery removeAttr() удаляет атрибут из выбранных элементов.

Приведенный ниже пример удалит атрибут href из элементов <a> при нажатии кнопки.

<script type="text/javascript">
  $(document).ready(function(){
    // Удаляет атрибут href
    $("button").click(function(){
      $("a").removeAttr("href");
    });
  });
</script>

Источник

Просмотров:

Добавить комментарий