How to remove a HTML element with a button click and then add it again

Question

I want to remove an element when I click the button and then add it again when I click the button again.

Don't get me wrong I don't want to "hide" the element I want to remove it.

I'm not really sure why this is not working but, my guess is that this creates a reference and once I delete the original element there would be nothing to add.

Is there any way to fix this using only native javascript?

       function sortClick() {
        var classes = document.getElementById('btn').classList;        
        var myNode = document.getElementById('myNode');
        var clone = myNode.cloneNode(true);


        if(!classes.contains('firstClick')){
        classes.add("firstClick");   
       myNode.parentNode.removeChild(myNode); 

          }

        else if(classes.contains('firstClick')) {
        classes.remove('firstClick');   
        document.body.appendChild( clone );

        
        }
  
        };

#btn {
cursor: pointer;
}
.firstClick {
color: red;
}

<div id='btn' onClick='sortClick()'>click</div>
<div id=myNode>removed then added</div>

This is essentially the same as hiding the node, @HalilÇakar which he said he does not want to do. — Brenden Price
– Brenden Price, Commented May 20, 2020 at 22:50

yinsweet · Accepted Answer · 2020-05-23 15:17:06Z

1

You have a problem because you don't store the element in a global variable but using a local one. Check this out. Hope it works for you.

var clone;

function sortClick() {
  var classes = document.getElementById('btn').classList;
  if (document.getElementById('myNode')) {

    var myNode = document.getElementById('myNode');
    clone = myNode.cloneNode(true);
  }

  if (!classes.contains('firstClick')) {
    classes.add("firstClick");
    myNode.parentNode.removeChild(myNode);

  } else if (classes.contains('firstClick')) {
    classes.remove('firstClick');
    document.body.appendChild(clone);


  }

};

#btn {
  cursor: pointer;
}

.firstClick {
  color: red;
}

<div id='btn' onClick='sortClick()'>click</div>
<div id='myNode'>removed then added</div>

edited May 23, 2020 at 15:17

yinsweet

2,8811 gold badge11 silver badges21 bronze badges

answered May 20, 2020 at 22:55

Dmitry S.

1,6722 gold badges17 silver badges24 bronze badges

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

2 Comments

Aifa Over a year ago

Can you explain further? The adding was working just fine but the removing was not.

Dmitry S. Over a year ago

@Aifa, When you fire a function the first time you declare and assign your variables to default values. Next time you run the function sortClick you redeclare your variable again and set its to default values. So when you try to paste the removed element there's no data in variable clone because there's no element on a page(you've already removed it first time). You can fix this by using global variable in a global scope. In that case you can access to a global variable and use already stored element data to paste it.

halilcakar · Accepted Answer · 2020-05-20 23:27:48Z

0

Hey sorry about that comment earlier. I've just prepared a pen for you.

Here you can see :=)

Right about explanation; in your code everytime you sortClick() it re-tries to cloneNode from myNode which in the second time it's null. That's why you had that error =)

var clone;
function sortClick() {
  var classes = document.getElementById('btn').classList;
  var myNode = document.getElementById('myNode');
  if(!clone) {
    clone = myNode.cloneNode(true); 
  }


  if (!classes.contains('firstClick')) {
    classes.add("firstClick");
    myNode.parentNode.removeChild(myNode);
  }
  else if (classes.contains('firstClick')) {
    classes.remove('firstClick');
    document.body.appendChild(clone);
  }
};

https://codepen.io/halilcakar/pen/WNQLqGq?editors=1111

edited May 20, 2020 at 23:27

answered May 20, 2020 at 22:57

halilcakar

1,6481 gold badge12 silver badges18 bronze badges

1 Comment

Aifa Over a year ago

it's okay, thank you for your effort :)) I wanted some explanation not just a solution but thanks anyway!

Collectives™ on Stack Overflow

How to remove a HTML element with a button click and then add it again

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related