Nút xoá bằng javascript – Mã JavaScript được cung cấp dưới đây, trong mã nguồn đầy đủ này, chúng tôi đã sử dụng phương thức remove() để xoá hoặc loại bỏ phần tử html khỏi DOM. Việc xoá một phần tử dễ dàng hơn, vì nó chỉ cần ID của phần tử đó.
Nút xoá bằng javascript
Nội dung
Làm cách nào để thêm và xoá tên khi nhấn nút bằng JavaScript? – Để tạo, sử dụng phương thức add(), trong khi để xoá phần tử đã tạo và được nối, bạn có thể sử dụng remove().
Sử dụng Phương thức remove()
function removeElement(elementId) {
// Removes an element from the document.
var element = document. getElementById(elementId);
element. parentNode. removeChild(element);
}
Phương thức remove() loại bỏ phần tử khỏi DOM.
Mã HTML
index.html
<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="myText" value="">
<br/>
<br/>
Age: <input type="number" name="age">
<button onclick="getProducts()">Try it</button>
<script>
function getProducts() {
var input = document.getElementsByTagName('input')[0].value;
var agenum = document.getElementsByTagName('input')[1].value;
var div = document.createElement('div');
div.style.border = '2px solid red';
div.style.padding = '10px';
div.style.display = 'block';
document.body.appendChild(div);
var result = 'Name: ' + input + '<br/>' + 'Age: ' + agenum;
div.innerHTML = result;
//create your delete button after you click try it
var del = document.createElement('button');
del.style.textDecoration = 'none';
del.innerHTML = 'Remove this person?';
del.style.color = 'white';
del.style.backgroundColor = 'blue';
//assign a function for it when clicked
del.onclick = function() { deleteButton(div,this)};
document.body.appendChild(del);
<!-- deleteButton(div); -->
}
function deleteButton(x,y) {
var parent = document.getElementsByTagName("BODY")[0];
//remove the div
parent.removeChild(x);
//remore the button
parent.removeChild(y);
}
</script>
</body>
</html>
Xoá Phần Tử HTML bằng JavaScript
Mã HTML được cung cấp dưới đây.
<!DOCTYPE html>
<html>
<head>
<title>Remove HTML Element using JavaScript</title>
</head>
<body>
<h1 id='heading'>HowToCodeSchool.com</h1>
<button onclick='remove()'>Remove Heading</button>
</body>
</html>
Mã JavaScript
<script>
function remove()
{
var element = document.getElementById("heading");
element.remove();
}
</script>
Tạo một nút xoá cho ứng dụng JavaScript của bạn
Để tạo một nút xoá trong ứng dụng JavaScript của bạn, bạn có thể tuân theo các bước chung sau đây:
Tạo một phần tử nút trong mã HTML của bạn với một ID hoặc lớp mà bạn có thể tham chiếu trong mã JavaScript của bạn. Ví dụ:
<button id="deleteButton">Delete</button>
Thêm một trình nghe sự kiện cho nút trong mã JavaScript của bạn, để khi nút được nhấn, một hàm được thực thi. Ví dụ:
const deleteButton = document.getElementById('deleteButton');
deleteButton.addEventListener('click', function() {
// Call a function to handle the delete action
});
Bên trong hàm xử lý hành động xoá, bạn có thể viết logic để xoá các mục mà nút đó liên quan đến. Điều này sẽ phụ thuộc vào yêu cầu cụ thể của ứng dụng của bạn.
Dưới đây là một ví dụ về hàm xoá loại bỏ một phần tử HTML cụ thể khi nút được nhấn:
function deleteElement() {
const element = document.getElementById('elementToDelete');
element.parentNode.removeChild(element);
}
deleteButton.addEventListener('click', deleteElement);
Trong ví dụ này, hàm deleteElement lấy phần tử HTML với id “elementToDelete” và loại bỏ nó khỏi DOM bằng cách sử dụng phương thức removeChild. Phương thức addEventListener được sử dụng để thêm hàm deleteElement như một người nghe sự kiện click cho phần tử deleteButton.
Lưu ý rằng đây chỉ là một ví dụ đơn giản và cách cụ thể để triển khai hàm delete sẽ phụ thuộc vào cấu trúc của ứng dụng của bạn và điều bạn muốn xóa.
Hy vọng bạn đã hiểu về nút xóa JavaScript.
- Bài đăng blog này được xuất bản ban đầu tại: https://www.pakainfo.com
