CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mazin Al-Bahrani
Mazin Al-Bahrani

Reputation: 75

Remove div with button click using JavaScript

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.

Upvotes: 1

Views: 4300

Answers (2)

mplungjan
mplungjan

Reputation: 177940

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>

Upvotes: 1

amit wadhwani
amit wadhwani

Reputation: 1140

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>

Upvotes: 1

Related Questions