Removing div with Javascript

Question

I am trying to remove a div element with javascript.I have following code but for some reason it is not working

HTML:

<div id="yes-drop" class="draggable drag-drop"><img src="{% static 'images/car.png' %}" class="brand"><button onclick="removediv()">-</button>  </div>
<div id="yes-drop" class="draggable drag-drop"><img src="{% static 'images/abc.png' %}" class="brand"><button onclick="removediv()">-</button>  </div>
<div id="yes-drop" class="draggable drag-drop"><img src="{% static 'images/bat.png' %}" class="brand"><button onclick="removediv()">-</button>  </div>
<div id="yes-drop" class="draggable drag-drop"><img src="{% static 'images/dog.png' %}" class="brand"><button onclick="removediv()">-</button>  </div>

my JS

function removediv(input) {
    document.getElementById('yes-drop').removeChild(input.parentNode);
}

Fiddle Link

In the fiddle I want to remove the element once when it is dragged.(After dragging a clone of element is formed

Update 1

My main aim is that I should be able to remove any of those element when I click the button for that particular element

Update 2

In my fiddle when I drag a element a copy of that element is created.I want to remove/delete that copy of element when button is clicked

If you want it in Javascript then why you have added jQuery tag? — Rohan Kumar
– Rohan Kumar, Commented Mar 22, 2018 at 7:59

Rohan Kumar · Accepted Answer · 2018-03-22 08:44:05Z

2

Firstly, make the id unique for all divs.

See below snippet, I have used jQuery to remove the closest() parent element.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="draggable drag-drop"><img src="{% static 'images/car.png' %}" class="brand"><button>-</button> </div>
<div class="draggable drag-drop"><img src="{% static 'images/abc.png' %}" class="brand"><button>-</button> </div>
<div class="draggable drag-drop"><img src="{% static 'images/bat.png' %}" class="brand"><button>-</button> </div>
<div class="draggable drag-drop"><img src="{% static 'images/dog.png' %}" class="brand"><button>-</button> </div>

If the draggable elements are dynamically created then try the below code,

$(document).on('click','.draggable .removediv',function () { // let button has class removediv
  $(this).closest('.drag-drop').remove();
});

edited Mar 22, 2018 at 8:44

answered Mar 22, 2018 at 8:04

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

NewBie Over a year ago

Closest as in always the last element will be removed ?

Rohan Kumar Over a year ago

Closest api.jquery.com/closest will get the closest parent of which you click a button.

NewBie Over a year ago

Thanks for your explanation but when you refer my fiddle you can see that I need to remove the element which is dragged

NewBie Over a year ago

In my fiddle there are 3 basic elements when I drag them a copy of that element is created and I want to remove that copy with the click of button

NewBie Over a year ago

I am not able to remove the dragged element

|

Narendra Jadhav · Accepted Answer · 2018-03-22 09:56:36Z

In JavaScript you need to pass the event parameter in onclick function and you can remove using like this

function removediv(e) {
 e.target.parentNode.remove()
}

In this fiddle, I have done modification. I hope this will guide you.

function removediv(e) {
 e.target.parentNode.remove()
}

textarea {
	resize: none;
	overflow: scroll;
	width: 80%;
}



#target {
	position: relative;
}

#outer-dropzone {
	height: 100%;
	width: 100%;
}
.dropzone {
	background-color: #ccc;
	border: dashed 4px transparent;
	border-radius: 4px;
	margin: 10px auto 30px;
	padding: 10px;
	width: 80%;
	transition: background-color 0.3s;
  
}

.drop-active {
	border-color: #aaa;
}
.drop-target {
	background-color: #29e;
	border-color: #fff;
	border-style: solid;
  
}

.drag-drop {
	display: inline-block;
	min-width: 40px;
	padding: 2em 0.5em;
	color: #fff;
	background-color: #29e;
	border: solid 2px #fff;
	-webkit-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
	transition: background-color 0.3s;
  z-index: 9999;
}


#yes-drop img {
	margin-left: auto;
	margin-right: auto;
	display: block;
  height: 90%;
  width: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
  <div class="gridster">
    <table border="1" class=".table-responsive">
      <tr>
        <th colspan="4" style="background-color:#05345c;">Zone 1</th>
        <th colspan="4" style="background-color:#05345c;">Zone 2</th>
        <th colspan="4" style="background-color:#05345c;">Zone 3</th>
      </tr>
      <tr>
        <td width="400" align="center" style="background-color:#0085ca">Sub 1</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 2</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 3</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 4</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 1</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 2</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 3</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 4</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 1</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 2</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 3</td>
        <td width="400" align="center" style="background-color:#0085ca">Sub 4</td>
      </tr>
    </table>
    <div id="outer-dropzone" class="dropzone">
      <ul></ul>
    </div>
  </div>
</div>

<button class="add-button btn btn-success mr-2">Add widget</button>


<div id="yes-drop" class="draggable drag-drop"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/72-200.png" height="30" width="30" class="brand"><button onclick="removediv(event)">-</button></div>

<div id="yes-drop" class="draggable drag-drop"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/72-200.png" height="30" width="30" class="brand"><button onclick="removediv(event)">-</button></div>

<div id="yes-drop" class="draggable drag-drop"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/72-200.png" height="30" width="30" class="brand"><button onclick="removediv(event)">-</button></div>

Collectives™ on Stack Overflow

Removing div with Javascript

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related