×

Please Login or Register to continue.

2
(2.2K Views)

I am creating a website using jQuery. I want to remove or delete the div block on the button click using the jQuery library. I am creating a delete operation. There is a situation where I want to remove the div block. I have created content inside the div block and I have multiple div blocks with a unique id. 

<div id="msg">This is my message.</div>
       <button type="button" id="remove">Remove</button>

In the above code, I have created a div block with a message. I want to remove this div message on the remove button click. 

html javascript jquery js
(2.4K Points)
in jquery
Answer
Share

2 Answers
(3.4K Points)
(edited)
1

In the past year, I was searching for the same solution to delete or remove div on button click. I got one of the best solution for this. If you want to delete or remove a div block on the button click then use the jQuery remove() method.

For example, if you want to remove one div only- 

<!DOCTYPE html>
<html>
<head>
   <title>Remove or delete div on button click using JavaScript jQuery library</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#remove").click(function(){
         $("#msg").remove();
     });
});
</script>
<body>
   <div id="msg">This is my message content..</div>
   <button type="button" id="remove">Remove</button>
</body>
</html>

Execute the above HTML code. You can remove the div block with a button click. 

How to remove specific div on button click using JavaScript jQuery?

You can remove specific div rows using the remove() method of jQuery.Suppose that, you fetch data from the database with a table row id number. You can display row numbers with div id using a loop in any programming. If you want to make it dynamically create a JavaScript function with arguments. 

For example - 

<!DOCTYPE html>
<html>
<head>
   <title>Remove specific div row on button click in jQuery</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
       function deleteRow(rowId)
       {
         $("#msg_"+rowId).remove();
       }   
   
</script>
<body>
   <div id="msg_1">This is row 1.. </div>
   <button type="button" onClick="deleteRow(1);">Remove</button>
   <hr> 
   <div id="msg_2">This is row 2..</div>
   <button type="button" onClick="deleteRow(2);" >Remove</button>

</body>
</html>

In the above example, I created two-row data with HTML div tags and a remove button for each row. As you can check in the above example, I created a deleterow() user-defined function with an argument. If you want to delete a specific row data, you have to create a function with the argument in JavaScript.I created a function inside the script tag with a rowId parameter. 

We can concatenate div row id with msg id using the plus sign in JavaScript and use jQuery remove() mehod to create remove or delete operation. Each row will contain a remove button. You can delete specific div data using the near-remove button.


Comment
(9.4K Points)
(edited)
0

The delete operation cannot be completed without jQuery fadeOut() method and the red background color of a div or row data. The process works like that - 

1. User clicks the delete button or removes button both are the same in this operation. You can set the button text as delete or remove. 

2. The div fades with a red background color on the button click. 

3. After that, the div removes from the page. 

Let's create an example of a delete operation in JavaScript. 

<!DOCTYPE html>
<html>
<head>
   <title>Remove or delete using jQuery fadeOut() method</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#delete").click(function(){
         $("#msg").css('background','red').fadeOut(700);
     });
});
</script>
<body>
   <div id="msg">This is my message content..</div>
   <button type="button" id="delete">Delete</button>
</body>
</html>

Execute the above code and click on the delete button to remove the div block with the fade effect.


Comment

Related Questions :-

Your Answer

You can post your answer after login..