CODEWITHSUNDEEP
javascriptjquery
Riantori
Riantori

Reputation: 317

how to delete a particular element in javascript

I want to make a function to create a new box when I click 'add new box' button and after that, it will also able to delete the box when I click the particular delete button which is related with the box. How to make the function in javascript? Should I save in an array for every new element that it creates?

My code:

function addBox() {
  var el = document.getElementById('target');
  var clone = el.cloneNode(true);
  var frame = document.getElementById('container');
  var attr = document.createAttribute('val');
  attr.value = 'demo';
  el.setAttributeNode(attr);
  frame.appendChild(clone);
}
<div id="container">
  <div id="target" class="foo" val="demo">
    <div class="content" style="width:100px;height:100px;background:orange;margin:1px" ></div>
  </div>
</div>
<button onclick="addBox();">Add box</button>
<button onclick="deleteBox();">Delete box</button>

I wanted to be like this!

enter image description here

Upvotes: 1

Views: 107

Answers (4)

Ionut Necula
Ionut Necula

Reputation: 11472

You need to target the button element using this as an argument on the deleteBox() function and then the parent of the button by using parentNode and then apply remove() method on it:

function addBox() {
  var el = document.getElementById('target');
  var clone = el.cloneNode(true);
  var frame = document.getElementById('container');
  var attr = document.createAttribute('val');
  attr.value = 'demo';
  el.setAttributeNode(attr);
  frame.appendChild(clone);
}

function deleteBox(e){
  e.parentNode.remove()
}
.content{
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  background: #F5A623;
  display: inline-block;
  vertical-align: middle;
}
<div id="container">
  <div id="target" class="foo" val="demo">
    <div class="content" style="width:100px;height:100px;background:orange;margin:1px"></div>
    <button onclick="deleteBox(this);">Delete</button>
  </div>
</div>
<button onclick="addBox();">Add box</button>

As a sidenote, I strongly recommend you to have unique ids on elements.

Upvotes: 1

Dui Samarasinghe
Dui Samarasinghe

Reputation: 247

Try this,

<div id="container">
      <div id="target" class="foo" val="demo">
        <div class="content">aaa</div>
        <button onclick="deleteBox(this);">Delete box</button>
      </div>
</div>
<button onclick="addBox();">Add box</button>


function addBox() {
  var el = document.getElementById('target');
  var clone = el.cloneNode(true);
  var frame = document.getElementById('container');
  var attr = document.createAttribute('val');
  attr.value = 'demo';
  el.setAttributeNode(attr);
  frame.appendChild(clone);
}
function deleteBox(obj){
    obj.parentElement.remove();
}

Upvotes: 1

Dhruv Raval
Dhruv Raval

Reputation: 1583

This is alternative example, You can try in your code :)

var sentenceIndex = 1;
        function addSentence() {            
            var n = sentenceIndex;
            var html = '<div class="form-item-wrap" id="sentencebox' + n + '">'+
            '<div class="form-item">'+
            '<input class="form-control" type="text" id="sentence'+n+'" name="sentence[' + n + ']">'+
            '</div>'+
            '<div class="course-region-tool">'+
            '<a href="javascript:void(0);" onclick="removeSentence('+n+');" class="delete" title="delete">'+
            '<i class="icon md-recycle"></i></a></div></div>';
            $("#addSentenceDiv").append(html);
            sentenceIndex = sentenceIndex + 1;
        }
        function removeSentence(id) {
            console.log(id);
            $("#sentencebox"+id).remove();
        }

Upvotes: 0

xale94
xale94

Reputation: 424

JQuery:

function deleteBox(){
   $( "#target" ).remove();
}

Javascript:

function deleteBox(){
   document.getElementById('target').remove()
}

Upvotes: 0

Related Questions