stackoom
  简体   繁体   中英

Remove div tag content

 原文  2018-05-31 09:50:52  9   10    javascript/ html

Question

How to remove div tag content on click x (using javascript) ? 

<div id="rang">
<div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div>
</div>

10 answers

solution1
 1  2018-05-31 09:59:38

Simply we can delete div using jquery for ex- 

$("span.clsrng").click(function(){
    $(this).parent("div.clsrng").remove();
})

solution2
 1  2018-05-31 10:17:36

First create onclick event on X and pass the current element into it and then find the parent on the basis of this element call removeChild() . Following is working demo: 

 <!DOCTYPE html> <html> <body> <div id="rang"> <div class="clsrng"> <span class="spnrng">one</span> <span class="clsrng" onclick="remove(this)">x</span> </div> <div class="clsrng"> <span class="spnrng">two</span> <span class="clsrng" onclick="remove(this)">x</span> </div> <div class="clsrng"> <span class="spnrng">three</span> <span class="clsrng" onclick="remove(this)">x</span> </div> </div> <script> var remove = function(data){ var div = data.parentElement; if(div){ div.parentElement.removeChild(div); } } </script> </body> </html>

solution3
 0  2018-05-31 09:59:52

Find the closest "Div" parent and remove that element. Try this code : 

$(".clsrng").click(function() {
$(this).closest("div.clsrng").remove();
});

solution4
 0  2018-05-31 10:00:46

Use a unique id for every element and have a function for setting their display to none. Here's a demo of a complete page with the desired functionality. 

  <html> <head> <title>Remove a div demo</title> </head> <body> <script> function hideElement(elementId) { var element = document.querySelector(elementId); if (element) { element.style.display = "none"; } } </script> <div id="rang"> <div id="something1" class="clsrng"> <span class="spnrng">one</span><span class="clsrng" onclick="hideElement('#something1')">x</span> </div> <div id="something2" class="clsrng"> <span class="spnrng">two</span><span class="clsrng" onclick="hideElement('#something2')">x</span> </div> <div id="something3" class="clsrng"> <span class="spnrng">three</span><span class="clsrng" onclick="hideElement('#something3')">x</span> </div> </div> </body> </html>

solution5
 0  2018-05-31 10:02:31

Try this 

$("body").on("click",".clsrng",function() {
     $(this).closest("div.clsrng").remove();
});

solution6
 0  2018-05-31 10:03:17

 $(".clsrng").on("click",function(){ $(this).closest("div").find("span").hide(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="rang"> <div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div> <div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div> <div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div> </div>

solution7
 0  2018-05-31 10:05:50

Check out this fiddle: https://jsfiddle.net/2mcdbs4c/

With the following function: 

function removeSpan(el){
  var parent = el.parentElement;
  parent.parentElement.removeChild(parent);
}

We select the parent element and then removes it.

Then you can just add it as a onclick event on your element 

onclick="removeSpan(this)"

solution8
 0  2018-05-31 10:06:06

 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function myFunc(id) { var elem = document.getElementById(id); return elem.parentNode.removeChild(elem); } </script> </head> <body> <div id="rang"> <div class="clsrng"><span class="spnrng" id="a1" onClick="myFunc(this.id);">one<span class="clsrng">x</span></span></div> <div class="clsrng" ><span class="spnrng" id="a2" onClick="myFunc(this.id);">two<span class="clsrng">x</span></span></div> <div class="clsrng" ><span class="spnrng" id="a3" onClick="myFunc(this.id);">three<span class="clsrng">x</span></span></div> </div> </body> </html>

solution9
 0  2018-05-31 10:16:06

 $(document).ready(function(){ $('.clsrng').click(function(){ $(this).remove(); }); }); 
 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </script> </head> <body> <div id="rang"> <div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div> <div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div> <div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div> </div> </body> </html>

you can simply use the remove() function of JQuery to do this, let me show you the example below. 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div id="rang">
<div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div>
<div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div>
</div>
</body>
</html>

 $(document).ready(function(){
        $('.clsrng').click(function(){
                $(this).remove();
        });
    });

solution10
 0  2018-05-31 10:25:33

 //using javascript var a = document.querySelectorAll("span.clsrng"); for(i of a){ i.addEventListener('click',function(e){ e.currentTarget.parentNode.remove(); }) } 
 <div id="rang"> <div class="clsrng"><span class="spnrng">one</span><span class="clsrng">x</span></div> <div class="clsrng"><span class="spnrng">two</span><span class="clsrng">x</span></div> <div class="clsrng"><span class="spnrng">three</span><span class="clsrng">x</span></div> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to remove div tag content? Remove div tag with specific id and retain content JQuery Remove all content inside a specified Div (Facebook Tag) How to remove a particular div tag and reset its content using javascript Remove <div> and <span> tag How to remove div tag? Remove content of p tag How to remove a particular html tag and its content which is inside a div, using div id by jquery? How to remove the div content? FadeOut a div tag and his content
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM