Remove div with button click using JavaScript

Question

I have created a form where it duplicates itself however I am unable to make the 'x' button remove the div it represents as required.

I placed both my buttons out of the div as shown below:

<button type="button" id="cross" class="buttonImgTop" onclick="remChild()"></button>
<div id="ValuWrapper"> ...content comes here... </div>
<button type="button" class="buttonImg" onclick="repeat()"></button>

The 'x' button and 'div' get cloned and duplicated every time the '+' sign is clicked to add more forms on the website.

Here is the code for both cloning the form and removing it:

<script>        
    var i = 0;
    var original = document.getElementById('ValuWrapper');
    var crossButton = document.getElementById('cross');
    var n = 0;

    function repeat() {
      var clone = original.cloneNode(true);
      var crossBut = crossButton.cloneNode(true);
      clone.id = "ValuWrapper" + ++i;
      crossBut.id = "cross" + i;
      crossButton.parentNode.appendChild(crossBut);
      original.parentNode.appendChild(clone);     
      // used for remChild() function
      n = i;

}

    function remChild(){

        for(i = 0; i <= n; i +=1)
        {
        $("#cross"+[i]).click(function () {
            $("#ValuWrapper"+[i]).slideUp(400, function () {
                    $("#ValuWrapper"+[i]).remove();
                    $(this).remove();
                });
          });
        }
    }
</script>

What I am trying to do is when the 'x' button is clicked, the animation 'slideUp()' works on the specified div then removes both the button and div and this should happen in any order the client would like. However it seems like it is not working.

1. You need to search for loop closure. 2. Don't use the id. Use the closest method 3. Don't mix DOM and jQuery — mplungjan
– mplungjan, Commented Aug 12, 2017 at 14:16
@mplungjan why can we not use 'break' instead? Loop closures look so confusing honestly in JavaScript as I was unable to comprehend having a function within a function and then calling the function. However, will this stop the loop once the action has been done once? — Mazin Al-Bahrani
– Mazin Al-Bahrani, Commented Aug 13, 2017 at 12:12
@amitwadhwani the code I added in my post is what is being cloned/removed only. no other code is being used. Please clarify why you require the whole HTML. — Mazin Al-Bahrani
– Mazin Al-Bahrani, Commented Aug 13, 2017 at 12:14

mplungjan · Accepted Answer · 2017-08-14 12:57:02Z

1

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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></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>

edited Aug 14, 2017 at 12:57

answered Aug 13, 2017 at 12:33

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

8 Comments

Mazin Al-Bahrani Over a year ago

Yes, this is exactly what I wanted! Thank you very much! I just would like to know if it is possible to hide or not allow deletion of the first div that has the information. Also, why is the Div not being named ValuWrapper1, ValuWrapper2,... etc. It seems it goes from ValuWrapper to ValuWrapper13, ValuWrapper26,...etc. While my previous code gave it numbering in a sequence.

mplungjan Over a year ago

Updated. And my code here shows ValuWrapper, ValuWrapper1, 2 etc

mplungjan Over a year ago

Ah - you have more dives in your content - then change to content.find("button.cross").

Mazin Al-Bahrani Over a year ago

the updated code will not delete since the id for cross will be the same throughout the page, it has to be given a unique id similar to the ValuWrapper. To fix this issue, we need to add the same line of code done for providing new ID for the ValuWrapper.

mplungjan Over a year ago

Of course it will - I am not using the IDs of either div nor buttons - You do not need to add anything - I added an ID to the ValueWrapper only because it seemed you needed it for something

|

amit wadhwani · Accepted Answer · 2017-08-13 13:32:43Z

1

I think this is what you need. Added full code in single html. Havnt used any css yet, But its a working example which you are looking. You can update the copy content as per your requirement.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
var i = 0;
var original; 
var crossButton ;
var n = 0;
function repeat() {
      var clone = original.cloneNode(true);
      var crossBut = crossButton.cloneNode(true);
      clone.id = "ValuWrapper" + ++i;
      crossBut.id = "cross" + i;
      $(crossBut).text("corss"+i);
      crossButton.parentNode.appendChild(crossBut);
          original.parentNode.appendChild(clone);     
          // used for remChild() function
          n = i; 
}

function remChild(obj){
    $($(obj).next()).slideUp(400,function()
    {
        $(obj).next().remove();
        $(obj).remove();
    });           
 }

$(document).ready(function(){
    original = document.getElementById('ValuWrapper');
    crossButton = document.getElementById('cross');

    $(".buttonImg").click(function(){
        repeat();
    });

    $("body").on("click",".buttonImgTop",function(){
        remChild(this);
    });
});       

</script>
<body>

<h2>My First JavaScript</h2>

<button type="button" id="cross" class="buttonImgTop" >remove</button>
<div id="ValuWrapper"> ...content comes here... </div>
<button type="button" class="buttonImg" >repeat</button>


</body>
</html>

edited Aug 13, 2017 at 13:32

answered Aug 13, 2017 at 13:25

amit wadhwani

1,1201 gold badge7 silver badges12 bronze badges

5 Comments

amit wadhwani Over a year ago

I think my above solution have sequencing of the buttons as well

mplungjan Over a year ago

I think my solution is more elegant and consistent in its use of jQuery vs DOM

amit wadhwani Over a year ago

agree, its a good learning for me to learn the way you have coded.

amit wadhwani Over a year ago

But my logic has no dependency on number of divs which I think is a good point. Your views?

mplungjan Over a year ago

I just count the buttons to give a new ID. It is not even needed as far as I can see. No dependency at all

Collectives™ on Stack Overflow

Remove div with button click using JavaScript

2 Answers 2

8 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related