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

click a button to delete itself and its parent div

you can do something like this:

const buttonOne = document.getElementById('btn1');
const buttonTwo = document.getElementById('btn2');

buttonOne.addEventListener("click", () => deleteElementAndThisChildNodes('box1'))
buttonTwo.addEventListener("click", () => deleteElementAndThisChildNodes('box2'))

function deleteElementAndThisChildNodes(parentId) {

How to delete the parent div when the button inside of it is clicked?

Here is a simple solution to hide the button on click

export default function App() {
const [hideButton, setHideButton] = useState(false);

return (
<div className="App">
{hideButton ? null : (
className="flex items-center justify-between px-1 bg-accent-tm mr-2 mb-1 text-white-tm text-sm rounded-sm"
onClick={() => setHideButton(true)}
<span className="pr-2" onClick={(e) => e.stopPropagation()}>{tag}</span>
<XCircleIcon className="h-4" />

javascript - remove element from div when button inside is pressed

Instead of using .innerHTML we nest nodes with appendChild. Finally for our close i button we add onClick event handler. We pass there our div node, and use remove() method to remove the node.


Added css.

Do not use a if your anchors only needs to delete your segments. For example use only i without wrapping a and add a cursor: pointer style to it.

See working example:

function createUserSegment(tags){
var div = document.createElement("div"); div.className = 'contact-segment-item includes'; var tagInfo = document.createElement("div"); tagInfo.className = 'contact-segment-item__text'; tagInfo.innerHTML = tags; var closeButton = document.createElement("i"); closeButton.className = 'contact-segment-item__closeButton white-segment-icon fa fa-times'; closeButton.onclick = function() { div.remove(); }; div.appendChild(tagInfo); div.appendChild(closeButton);
#contact-segments {  max-width:350px;  width: 100%;}
.contact-segment-item { display: block; position: relative; width: 100%; background: #00B792; border-radius: 8px; line-height: 40px; clear: both; padding: 20px 30px; margin-bottom: 10px;}
.contact-segment-item__anchor::after { clear: both;}
.contact-segment-item__text { display: inline-block; color: #fff;}
.contact-segment-item__closeButton { display: inline-block; cursor: pointer; color: #fff; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
<link href="" rel="stylesheet" />
<button id="add-new" onClick="createUserSegment('new one')">Add new segment</button>
<div id="contact-segments">

Remove div with button click using JavaScript

This is what I THINK you want.

I try not to hardcode anything but count and remove siblings
I have also remove all inline event handlers

$(function() {  var $original = $('#ValuWrapper'),    $crossButton = $('#cross'),    $content = $("#content");
$content.on("click", ".cross", function() { if ($(this).is("#cross")) return false; var $cross = $(this); $(this).next().slideUp(400, function() { $(this).remove(); $cross.remove(); }); });
$("#repeat").on("click", function() { $content.append($crossButton.clone(true).removeAttr("id")); $content.append( $original.clone(true) .hide() // if sliding .attr("id",$original.attr("id")+$content.find("button.cross").length) .slideDown("slow") // does not slide much so remove if you do not like it ); });
#content { height:100%}
<script src=""></script><div id="content">  <button type="button" class="buttonImgTop cross" id="cross">X</button>  <div id="ValuWrapper">     ...content comes here... <br/>    ...content comes here... <br/>  </div></div><button type="button" class="buttonImg" id="repeat">Add</button>

Delete a div on a button click (changing id)

Define an onclick function on button click pass $index as a function argument.

<p id="delete_<?=$index?>" class="delete_button" onclick="del_div_fun('<?php echo $index ?>')">supprimer</p>

Now you have to define this function in javascript like.

function del_div_fun(index_val){
var div_id = 'past_experience_'+index_val;
}//end of function del_div_fun

Please use jquery library

<script src=""></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>

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 () {

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}`}>
<input type="text" />
<button onClick={() => removeNode(idx)}>Remove</button>

<button onClick={handleAddDiv}>Add</button>

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

Leave a reply