How To Make A Delete Button In Javascript With Code Examples In this tutorial, we will try to find the solution to How To Make A Delete Button In Javascript through programming. The following code illustrates this. As we have seen, a large number of examples were utilised in order to solve the How To Make A Delete Button In Javascript problem that was present.
Name:
Age:
Try it
function myFunction[] {
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 output = 'Name: ' + input + '
' + 'Age: ' + agenum;
div.innerHTML = output;
deleteButton[div];
}
function deleteButton[x] {
var del = document.createElement['button'];
del.style.textDecoration = 'none';
del.innerHTML = 'Remove this person?';
del.style.color = 'white';
del.style.backgroundColor = 'blue';
document.body.appendChild[del];
}
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học React.js
- React.js xử lý delete
React.js xử lý delete
- Bài tập này sẽ giúp các bạn xóa một mục bất kỳ.
- Cũng giống như insert và update việc xóa dữ liệu cũng cần tiến hành ở phía client và server. Ta lần lượt tiến hành các bước như sau:
- Tạo button xóa dữ liệu
- Xử lý xóa dữ liệu ở phía client
- Xử lý xóa dữ liệu MySQL
- Tổng kết
Tạo button xóa dữ liệu
- Xử lý xóa dữ liệu ở phía client
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
- Xử lý xóa dữ liệu MySQL
- Tổng kết
Trước tiên ta cần tạo button bên trong file /client/src/App.js như sau:
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
-
handleDelete = [item] => {
const newsId = item.id;
console.log[newsId];
}- Thuộc tính
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
buttonnào được click. -
Xử lý xóa dữ liệu ở phía client
- Xử lý xóa dữ liệu MySQL
handleDelete = [item] => {
const newsId = item.id;
this.setState[prevState => [{
news: prevState.news.filter[elm => elm.id !== newsId ]
}]];
}- Tổng kết
- Trước tiên ta cần tạo
buttonbên trong file/client/src/App.jsnhư sau:
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
-
Xử lý xóa dữ liệu MySQL
- Tổng kết
- Trước tiên ta cần tạo
buttonbên trong file/client/src/App.jsnhư sau:
/client/src/App.js
handleDelete = [item] => {
const newsId = {
id: item.id
};
axios.post['/api/delete', newsId]
.then[res => {
this.setState[prevState => [{
news: prevState.news.filter[el => el.id !== item.id ]
}]];
}]
.catch[error => console.log[error]];
}-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
-
- Thuộc tính
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
buttonnào được click. -
- Kết quả
- Ta tạo function xử lý
button, sao cho khi click vào button sẽ lấy được-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
buttonđược click, ta thực hiện như sau: -
/app.js
app.post['/api/delete', [req, res] => {
var sql = "DELETE FROM news "
+ "WHERE id='"+req.body.id+"'";
connection.query[sql, function[err, results] {
if [err] throw err;
res.json[{news: results}];
}];
}];- Khi này khi click button và xem console.log [Chrome nhấn F12, chọn Console] thì các bạn sẽ thấy
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
buttonxuất hiện. -
- Tiếp theo ta sẽ viết lại function
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
buttonđược click, ta viết như sau: -
handleDelete = [item] => { const newsId = item.id; console.log[newsId]; }1, đây là bộ lọc mãng trong Javascript, sẽ lọc tất cả item nào có-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
handleDelete = [item] => { const newsId = item.id; console.log[newsId]; }3 [vớihandleDelete = [item] => { const newsId = item.id; console.log[newsId]; }3 là-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
buttonđược click], khi này ta sẽ lấy tất cả item ngoại trừ item cóhandleDelete = [item] => { const newsId = item.id; console.log[newsId]; }3.-
Tổng kết
- Trước tiên ta cần tạo
buttonbên trong file/client/src/App.jsnhư sau:
/client/src/App.js
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
import React, { Component } from 'react';
import axios from 'axios';
import Modal from 'react-modal';
class App extends Component {
constructor [props] {
super[props];
this.state = {
modalIsOpen: false,
news: [],
id: '',
title: '',
description: '',
content: ''
}
};
componentDidMount[] {
axios.get['/api/news']
.then[res => {
const news = res.data;
this.setState[{ news: news.news }];
}]
.catch[error => console.log[error]];
};
handleInputChange = [event] => {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState[{
[name]: value
}];
};
handleInsertSubmit = [event] => {
event.preventDefault[];
const newItem = {
id: '',
title: this.state.title,
description: this.state.description,
content: this.state.content
};
axios.post['/api/insert', newItem]
.then[res => {
let news = this.state.news;
news = [newItem,...news];
this.setState[{ news: news }];
}]
.catch[error => console.log[error]];
};
componentWillMount[] {
Modal.setAppElement['body'];
};
openModal = [item] => {
this.setState[{
modalIsOpen: true,
id: item.id,
title: item.title,
description: item.description,
content: item.content
}];
};
closeModal = [] => {
this.setState[{
modalIsOpen: false
}];
};
handleEditSubmit = [event] => {
event.preventDefault[];
const newUpdate = {
id: this.state.id,
title: this.state.title,
description: this.state.description,
content: this.state.content
};
axios.post['/api/edit', newUpdate]
.then[res => {
let key = this.state.id;
this.setState[prevState => [{
news: prevState.news.map[
elm => elm.id === key? {
...elm,
title: this.state.title,
description: this.state.description,
content: this.state.content
}: elm
]
}]]
}]
.catch[error => console.log[error]];
};
handleDelete = [item] => {
const newsId = {
id: item.id
};
axios.post['/api/delete', newsId]
.then[res => {
this.setState[prevState => [{
news: prevState.news.filter[el => el.id !== item.id ]
}]];
}]
.catch[error => console.log[error]];
};
render[] {
return[
Add an item
Title
Description
Content
Submit
{this.state.news.map[item => [
-
{item.title}
{item.description}
this.openModal[item]}>Edit
this.handleDelete[item]}>Delete
]]}
Close
Title
Description
Content
Edit
]
}
};
export default App;/app.js
const express = require['express'];
const mysql = require['mysql'];
const app = express[];
const bodyParser = require['body-parser'];
app.use[bodyParser.json[]];
app.use[bodyParser.urlencoded[{
extended: true
}]];
const connection = mysql.createConnection[{
host: 'localhost',
user: 'reactUser',
password: '1234567',
database: 'reactmysql'
}];
connection.connect[function[err]{
[err] ? console.log[err] : console.log[connection];
}];
app.get['/api/news', [req, res] => {
var sql = "SELECT * FROM news ORDER BY id DESC";
connection.query[sql, function[err, results] {
if [err] throw err;
res.json[{news: results}];
}];
}];
app.post['/api/insert', function[req, res] {
var sql = "INSERT "
+ "INTO news[title,description,content] "
+ "VALUES['"
+ req.body.title+ "','"
+ req.body.description + "','"
+ req.body.content+"']";
connection.query[sql, function [err, results] {
if[err] throw err;
res.json[{news: results}];
}];
}];
app.post['/api/edit', [req, res] => {
var sql = "UPDATE news SET "
+ "title='"+req.body.title+"',"
+ "description='"+req.body.description+"',"
+ "content='"+req.body.content+"'"
+ "WHERE id='"+req.body.id+"'";
connection.query[sql, function[err, results] {
if [err] throw err;
res.json[{news: results}];
}];
}];
app.post['/api/delete', [req, res] => {
var sql = "DELETE FROM news "
+ "WHERE id='"+req.body.id+"'";
connection.query[sql, function[err, results] {
if [err] throw err;
res.json[{news: results}];
}];
}];
app.listen[4000, [] => console.log['App listening on port 4000']];- Thuộc tính
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
-
{this.state.news.map[item => [
-
{item.title}
{item.description}this.openModal[item]}>Edit this.handleDelete[item]}>Delete
]]}
buttonnào được click. -
- Kết quả