Delete a div when a button is clicked through JavaScript

Question

Delete a div when a button is clicked through JavaScript

I'm having an issue with a form I created that duplicates itself - I can't seem to get the 'x' button to remove the corresponding div as needed.

I have placed both buttons outside of the div like this:

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

Every time the '+' sign is clicked to add more forms on the website, the 'x' button and 'div' are cloned and duplicated.

Below is the code for 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);     
  
      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>

I want the 'x' button to trigger the animation 'slideUp()' on the specified div, then remove both the button and div in any order the client prefers. But it doesn't seem to be working as intended.

javascript jquery html css

Answer 1

Answer №1

This appears to be the solution you are searching for.

In an effort to avoid hardcoding, I have implemented a method to count and remove sibling elements while also eliminating any inline event handlers that may cause issues.

$(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>

Answer 2

This appears to be the solution you are searching for.

In an effort to avoid hardcoding, I have implemented a method to count and remove sibling elements while also eliminating any inline event handlers that may cause issues.

$(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>

Answer 3

Answer №2

Here is the solution that you've been looking for. I have included the complete code in a single HTML file. Although no CSS has been applied yet, it is a functional example that meets your requirements. Feel free to customize the content as needed.

<!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>

Answer 4

Here is the solution that you've been looking for. I have included the complete code in a single HTML file. Although no CSS has been applied yet, it is a functional example that meets your requirements. Feel free to customize the content as needed.

<!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>

Delete a div when a button is clicked through JavaScript

Answer №1

Answer №2

Similar questions

Loop through an array of arrays in JavaScript. If a match is found, add it to an existing inner array. If not, create a new

What is the most efficient way to transmit an HTML document element from a client to a server in Node JS

Ensure that text within openhtmltopdf is aligned to the right and any unnecessary white space at the

React Router - Changing the URL path without affecting the components displayed

The next.js router will update the URL without actually navigating to a new page, meaning that it will still display the current page with the updated URL

"Utilizing Jquery for interactive menu functionality - delivering the requested JSON

Exploring the functionalities of jQuery within ajax-loaded content

Unusual $http Angular.js POST inquiry

Updating Rails modal fields via AJAX on the modal index page

Utilizing the mobile navigation layout for desktop screens without the need to adjust breakpoints

Discovering targeted information from object utilizing React

Only conceal the breadcrumb trail on the 404 error page

Employ a unique filter within the controller of your AngularJs directive

Transmitting an image from an HTML file to a Node.js server

Show the present category name within breadcrumbs (utilizing angularJS)

Having difficulty retrieving items from Mongoose-Node database

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Customizing response headers in vanilla Node.js

Click on the submenu to expand it, then simply select the desired option to navigate

How can I extract the document that is generated when a button is clicked using BeautifulSoup?