How to Remove the Div That a Button Is Contained in When the Button Is Clicked

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Remove specific HTML div when click on delete button using vuejs

In the discussion in comments above, I was not understanding that you're trying to control the visibility of individual rows separately.

The basic answer is still the same: have your "delete" button set a state variable, and use that state variable to control the visibility of the element you want deleted.

The difference is that if you're controlling the visibility of ten different things, you need ten different state variables.

Typically your state data would already be in an array structure, since you're presumably going to be wanting to put different data in each of these rows; instead of this kind of shortcut

<div v-for="index in 10" ...>

you would have something like

data() {
    return {
      rowData: [
         {isShown: true, /* other data for this row here */},
         {isShown: true, /* other data for this row here */},
         {isShown: true, /* other data for this row here */},
         /* ...and so on */
      ],

and your render loop would iterate over that rowData array (remembering that you shouldn't have v-for and v-if on the same element):

<template v-for="(row, index) in rowData">
  <div v-if="row.isShown">
    /* ... */
    <button v-click="hideRow(index)">Delete</button>
  </div>
</template>

The delete button in each row can pass the current row index on to the click handler, so the handler knows which element to update isShown for (by replacing rowData with a new array where rowData[index].isShown is false.)

Removing a div on button click - issue: removing all divs

Turn the text property to html:

html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',

Then write click event for .close elements:

$('body').on('click', '.draggable .close', function () {
    $(this).closest('.draggable').remove();
});

jsFiddle Demo.

React: How can I remove a specific div element after clicking its associated button?

This is not prefered react way of doing things, but this will work:

import "./styles.css";

import { useState } from "react";

const App = () => {
  const [counter, setCounter] = useState(1);

  const handleAddDiv = () => {
    setCounter(counter + 1);
  };

  const removeNode = (idx) => document.getElementById(`id-${idx}`).remove();

  return (
    <div className="App">
      {Array.from(Array(counter)).map((item, idx) => (
        <div key={idx} id={`id-${idx}`}>
          <div>
            <input type="text" />
            <button onClick={() => removeNode(idx)}>Remove</button>
          </div>
        </div>
      ))}

      <button onClick={handleAddDiv}>Add</button>
    </div>
  );
};

export default App;

Generaly if you would like to have it made correactly then you would want to map on a real array and have every item in array eighter having an unique id or simply use map index and then based on which item you click write a function to remove from that array our specific element.

Related Topics