4 Làm thế nào để loại bỏ tất cả trẻ em của yếu tố nội dung?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi cần xóa tất cả con của một div sau khi nhấp vào enter. Có một trình lắng nghe div và sự kiện bên dưới.

<div id = "area" contenteditable="true"></div>

document.onreadystatechange = function(){
    if(document.readyState == 'complete'){
        document.getElementById("area").addEventListener("keypress" , public_mode);
}

function public_mode(){
    var key = window.event.keyCode;
      if (key == 13) {
         sendMessage();
    }
}

function sendMessage(){
    var area = document.getElementById("area");
    while (area.firstChild) {
        area.removeChild(area.firstChild);
    }
}

Như bạn có thể thấy các phần tử có thể nội dung được thêm một phần tử theo cách nhấp vào - nó phụ thuộc vào trình duyệt, phần tử nào sẽ được thêm vào. Trong trường hợp của tôi, tôi sử dụng chrome và ở đây được chèn div. Vì vậy, kết quả sau khi nhấp vào nhập vào khu vực nhưng mà không xóa

<div id = "area" contenteditable = "true">
     Sckoriy
     <div></div>
</div>

và, với việc xóa

<div id = "area" contenteditable = "true">
     <div></div>
     <div></div>
</div> 

Nhưng, kết quả cần thiết là

 <div id = "area" contenteditable = "true">
     //Empty
 </div>
    
1
4 Câu trả lời                              4                         

Mã hầu hết hoạt động, tuy nhiên có hai vấn đề chính.

  • keyCode không được chấp nhận. bạn nên sử dụng key để biến cú pháp tìm kiếm khóa thành tìm chuỗi. Điều này có nghĩa thay vì 13 bạn chỉ cần kiểm tra xem key có phải là Enter.

  • Thứ hai, bạn cần chuyển sự kiện đến chức năng public_mode để bạn có thể đọc key đã được nhấn khi sự kiện xảy ra. Bạn cũng cần sử dụng preventDefault để ngăn không cho nó thêm một dòng mới sau khi xóa mọi thứ khỏi khu vực nội dung ban đầu.

Enter
    
1
2019-05-08 16: 24: 25Z
  1. Tôi nên tìm hiểu điều gì ngăn chặnDefDefault () làm được nhiều hơn. Tôi biết rằng khi phương thức này được gọi trên tài khoản gửi biểu mẫu, trang sẽ không tải lại. trong trường hợp ngăn chặn có mục đích ngăn chặn thêm một dòng mới khi nhấp vào enter.
    2019-05-08 17: 09: 14Z
  2. @ Sckoriy Nếu bạn nghĩ về từng thành phần, một số thành phần có chức năng mặc định khi chúng được tạo. a.e. nhấn enter trong Textareas tạo ra một dòng mới, nhấn nút Gửi trong biểu mẫu thực hiện yêu cầu mạng, v.v.) Câu hỏi sau đó là - vì các hàm sự kiện này được tích hợp khi các phần tử này được thêm vào, nếu bạn không muốn chúng để làm việc chính xác như mô tả? Cách giải quyết là bạn có thể thêm một trình lắng nghe sự kiện mới vào cùng một sự kiện như mặc định đang theo dõi và bằng cách gọi
    document.onreadystatechange = function() {
      if (document.readyState == 'complete') {
        document.getElementById("area").addEventListener("keypress", public_mode);
      }
    
      function public_mode(event) {
        var key = event.key;
        if (key === "Enter") {
          event.preventDefault();
          sendMessage();
        }
      }
    
      function sendMessage() {
        var area = document.getElementById("area");
        while (area.firstChild) area.removeChild(area.firstChild);
      }
    }
    #area {
      min-width: 100vw;
      border: 1px solid black;
    }
    <div id="area" contenteditable="true"></div>
    trong trình nghe sự kiện mới, bạn có thể dừng hành vi mặc định kích hoạt.
    2019-05-08 17: 20: 43Z

Bạn chỉ có thể đặt proprety bên trong thành một chuỗi trống;

event.preventDefault()     
0
2019-05-08 16: 25: 22Z
  1. Không có sự khác biệt giữa cách xóa của tôi và cách này. Ngoài ra, cách của bạn chậm hơn nhiều;
    2019-05-08 16: 27: 10Z

nhắm mục tiêu dom theo id

area.innerHTML = '';

lưu số lượng trẻ em

var s = document.getElementById("area");

và xóa số phần tử con của phần tử

var num = s.children.length;

và bên trong đối với một số thext

for(var i=0;i<num;i++){
   s.children[0].remove()
 }
    
0
2019-05-08 16: 26: 52Z
  1. Câu trả lời đã được đưa ra. Quyết định là gọi phương thức notifyDefault (). Nó không phụ thuộc vào cách các phần tử sẽ là dbị xóa.
    2019-05-08 16: 34: 12Z
  2. @ Sckoriy yep Tôi thấy, cần ngăn chặnDefault (), là câu trả lời đúng
    2019-05-08 16: 39: 09Z

Truyền sự kiện quan trọng làm đối số cho chức năng của bạn.

Ngoài ra, nếu bạn không muốn dòng mới được nhập vào div của mình, bạn có thể ngăn sự kiện tiếp tục với

s.innerHTML = "";
.

event.preventDefault()
    
0
2019-05-08 16: 34: 49Z
  1. @ zfrisch, tôi chỉ đơn giản đưa ra một cách khác để làm điều đó
    2019-05-08 16: 30: 47Z
document.onreadystatechange = function() {
  if (document.readyState == 'complete') {
    const area = document.getElementById('area')
    area.addEventListener('keypress', public_mode);
    area.focus();
  }
}

function public_mode(event) {
  if (window.event.keyCode == 13) {
    sendMessage();
    event.preventDefault();
  }
}

function sendMessage() {
  const area = document.getElementById('area');
  while (area.firstChild) {
    area.removeChild(area.firstChild);
  }
}
<div id="area" contenteditable="true">Press Enter to erase me!</div>
nguồn đặt đây