There is such a code.

<div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br>

How to remove a div by clicking on a button in it? For example 2 or 4.

    3 answers 3

    Like that:

     $('.del').click(function() { $(this).parent().remove(); });
    • No, I need to click on id = "del", but then everything is deleted, and only the first button is clicked. - Anatoly
    • I corrected the answer - KAGG Design
    • Can you assign a class to a button? - KAGG Design
    • Yes, the main thing that he was the same. - Anatoly
    • Well, if the button has a class del, then it's easier. Corrected the code. - KAGG Design

    ID must be unique.
    Use class:

     function remove(){ let w = this.closest('.form'), br = w.nextElementSibling; if(br.nodeType === 1 && br.nodeName === 'BR') br.remove(); w.remove(); } Array.from(document.querySelectorAll('.del')).forEach(b => b.addEventListener('click', remove)); /* jQuery style: $('.del').on('click', function(){ $(this).parent('.form').remove(); }); */ 
     <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" ></textarea><br><input class="plink" type="text" value=""/><button class="del" >Удалить</button></div><br> 

       "use strict"; window.onload = function(){ var _cover = document.querySelector("div.cover"); _cover.addEventListener("click",function(){ var event = event || window.event; var target = event.target || event.srcElement; if(target.parentNode.tagName == "DIV"){ target.parentNode.style.display = "none"; }; },false); }//конец функции 
       <div class="cover"> <div class="form"><textarea class="ptext" >textarea_1</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" >textarea_2</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" >textarea_3</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" >textarea_4</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> <div class="form"><textarea class="ptext" >textarea_5</textarea><br><input class="plink" type="text" value=""/><button id="del" >Удалить</button></div><br> </div>

      • Try this option. - Dhunga
      • Just perfect delegation performance. The main thing is not to click past the button :) - user207618