Hướng dẫn remove ul from div javascript - xóa ul khỏi div javascript

Có cách nào để loại bỏ các yếu tố LI của UL mà không cần loại bỏ UL không? Tôi dường như chỉ có thể tìm thấy điều này.

var element = document.getElementById('myList');
element.parentNode.removeChild(element);

Nhưng, điều này loại bỏ UL. Tôi hy vọng có thể loại bỏ và nối các yếu tố LI một cách nhanh chóng mà không phải tạo ra UL mỗi khi tôi loại bỏ các yếu tố LI. Chỉ cần tìm kiếm một cách đơn giản hơn. Cảm ơn vì bất kì sự giúp đỡ.

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

Hỏi ngày 13 tháng 9 năm 2013 lúc 20:50Sep 13, 2013 at 20:50

MazumamazumaMAZUMA

8933 Huy hiệu vàng10 Huy hiệu bạc20 Huy hiệu đồng3 gold badges10 silver badges20 bronze badges

10

Bạn có thể làm một cái gì đó như thế này.

var myList = document.getElementById('myList');
myList.innerHTML = '';

Nếu bạn đang sử dụng jQuery

$('#myList').empty();

Cả hai điều này sẽ loại bỏ mọi thứ bên trong danh sách.

dr.Crow

1.47514 Huy hiệu bạc17 Huy hiệu đồng14 silver badges17 bronze badges

Đã trả lời ngày 13 tháng 9 năm 2013 lúc 20:54Sep 13, 2013 at 20:54

Justin Woodjustin WoodJustin Wood

9.7632 Huy hiệu vàng30 Huy hiệu bạc45 Huy hiệu Đồng2 gold badges30 silver badges45 bronze badges

Cái này cần phải dùng mẹo:

var lis = document.querySelectorAll('#myList li');
for(var i=0; li=lis[i]; i++) {
    li.parentNode.removeChild(li);
}

Demo http://jsfiddle.net/krasimir/uhhux/

Đã trả lời ngày 13 tháng 9 năm 2013 lúc 21:00Sep 13, 2013 at 21:00

KrassimirkrasimirKrasimir

13.1k3 Huy hiệu vàng39 Huy hiệu bạc54 Huy hiệu đồng3 gold badges39 silver badges54 bronze badges

2

Lý do nó loại bỏ

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

Nếu bạn cần loại bỏ tất cả các phần tử LI thì bạn có thể sử dụng:

document.getElementById('myList').innerHTML = '';

sẽ làm trống hoàn toàn

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

var myList = document.getElementById('myList');
myList.innerHTML = '';

var myList = document.getElementById('myList');
myList.innerHTML = '';

var ulElem = document.getElementById('myList');

ulElem.removeChild(ulElem.childNodes[i])

trong đó

var myList = document.getElementById('myList');
myList.innerHTML = '';

var myList = document.getElementById('myList');
myList.innerHTML = '';

Để tham khảo: https://developer.mozilla.org/en-us/docs/web/api/node.removechild

Đã trả lời ngày 13 tháng 9 năm 2013 lúc 21:07Sep 13, 2013 at 21:07

Ben Jacksonben JacksonBen Jackson

11.3k6 Huy hiệu vàng31 Huy hiệu bạc42 Huy hiệu đồng6 gold badges31 silver badges42 bronze badges

const li = document.querySelectorAll(".list-item-class");
for(let i = 0; i <= li.length; i++ ){
    l = li[i];
    l.remove();
}

Đã trả lời ngày 18 tháng 3 năm 2021 lúc 23:05Mar 18, 2021 at 23:05

ecd10ecd10ecd10

Huy hiệu 111 Đồng1 bronze badge

Miễn là chúng ta có một đứa con đầu lòng - loại bỏ nó. (sẽ miễn là chúng tôi thậm chí có một thành viên).

  const removeNodesFromList = () => {
    const nodes = document.querySelector('.ul-class-selector');
    while (nodes.firstChild) {
      nodes.removeChild(nodes.firstChild);
    }
  };

Đã trả lời ngày 30 tháng 11 năm 2017 lúc 12:26Nov 30, 2017 at 12:26

liron_hazanliron_hazanliron_hazan

1.3562 huy hiệu vàng18 Huy hiệu bạc25 Huy hiệu đồng2 gold badges18 silver badges25 bronze badges

let ol = document.querySelector("ol");

function addItem() {
  let lastIndex = ol.childElementCount;
  let li = document.createElement("li");
  li.dataset.index = lastIndex;
  let a = document.createElement("a");
  a.href = "#";
  a.innerHTML = " Remove";
  a.addEventListener("click", function(e) {
    e.preventDefault();
    let index = e.target.parentNode.dataset.index;
    removeItem(parseInt(index));
  })
  li.appendChild(a);
  ol.appendChild(li);
}

function removeItem(i) {
  let li = ol.children[parseInt(i)];
  ol.removeChild(li);
  for (let j = i; j < ol.childElementCount; j++) {
    let li = ol.children[j];
    li.dataset.index = j;
  }
}

addItem();

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

Đã trả lời ngày 5 tháng 10 năm 2021 lúc 10:29Oct 5, 2021 at 10:29

hp-01hp-01hp-01

12 huy hiệu đồng2 bronze badges

1

Cách tôi giải quyết vấn đề này là điều đó. Tôi tạo tính năng xóa trong hàm tạo:

HTML

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

JavaScript

<div id="listView">
  <ul id="myList" class="myList-class">
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

Vì vậy, sau khi bạn tạo ra nó. Khi bạn nhấp vào phần tử Li, nó sẽ biến mất.

Đã trả lời ngày 19 tháng 11 năm 2021 lúc 3:42Nov 19, 2021 at 3:42

Làm thế nào thêm và xóa các mục trong JavaScript?

Làm thế nào loại bỏ thẻ li trong jQuery?

Bạn sẽ sử dụng tùy chọn nào sau đây để xóa nút con bằng HTML bằng JavaScript?