Почему это не функция React

Reactjs использует виртуальный дом, это создает дерево объектов на основе jsx и визуализирует в пользовательском интерфейсе. Здесь совершенно не предлагается манипулирование DOM с использованием jQuery. Если вы хотите отображать данные на основе условия, сделайте это для объектов reactjs, таких как состояние или реквизиты, не пытайтесь удалить элемент с помощью jQuery.

Вот пример того, как добавлять и удалять элемент, используя только Reactjs.

class App extends Component {
  state = {
    todo: [],
    name: '',
    quantity: '',
    price: '',
  }

  constructor(props) {
    super(props)

    this._addTodo = this._addTodo.bind(this);
    this._removeTodo = this._removeTodo.bind(this);
  }

  _addTodo(e) {
    e.preventDefault()

    const { todo, name, quantity, price } = this.state

    const newTodo = {
      name,
      quantity,
      price,
      id: Date.now(),
    }

    this.setState({
      todo: [...todo, newTodo],
    })
  }

  _removeTodo(item) {
    const { todo } = this.state

    let index

    index = todo.findIndex(x => x.id === item.id)
    todo.splice(index, 1)

    this.setState({
      todo,
    })
  }

  render() {
    return (
      <div>
        <form onSubmit = {this._addTodo}>
          <input type = "text" placeholder = "Name" value = {this.state.name} onChange = {e => this.setState({name: e.target.value})} />
          <input type = "text" placeholder = "Quantity" value = {this.state.quantity} onChange = {e => this.setState({quantity: e.target.value})} />
          <input type = "text" placeholder = "Price" value = {this.state.price} onChange = {e => this.setState({price: e.target.value})} />
          <button type = "submit" onClick = {this._addTodo}>Add</button>
        </form>
        <hr />
        <div>
          {this.state.todo.map(item => (
            <div className = "box">
              <i className = "hvhv">{item.quantity}</i>
              <i> {item.name} </i>
              <i>{item.price}</i>
              <button type = "button" onClick = {() => this._removeTodo(item)} className = "removeTodo">Remove</button>
            </div>
          ))}
        </div>
      </div>
    )
  }
}