How to remove a div from unique id?

Question

How can I remove a div from a unique id? I've tried many ways but always fail.

function uniqId() {
  return Math.round(new Date().getTime() + (Math.random() * 100));
}


function sklik() {
  var dov1 = `<div class="dwnctrl d-flex mt-3" id="` + uniqId() + `">
    <input class="form-control mr-2" name="" id="" placeholder="Quality" style="width: 100px;">
    <input class="form-control mr-2" name="" id="" placeholder="Link">
    <input class="form-control mr-2" name="" id="" placeholder="Server Name" style="width: 150px;">
    <button type="button" class="btn toddd" id="post-grab" onclick="rmv()">Remove</button>
  </div>`;
  $(".frmDowns").after(dov1);
}

Since you're using jQuery, have you tried `bind()` or `on()` on the particular element in question? — HoldOffHunger, Oct 08 '20 at 14:42
Does this answer your question? [Remove element by id](https://stackoverflow.com/questions/3387427/remove-element-by-id) — Greggz, Oct 08 '20 at 14:44
Also note that the entire point of template literals is that you don't need to concatenate. Change ```id="` + uniqId() + `"``` to `id="${uniqId}"` — Rory McCrossan, Oct 08 '20 at 14:45

score 2 · Answer 1 · edited Oct 08 '20 at 19:35

2

You need to remember the unique id and pass it to the remove function

function uniqId() {
   return Math.round(new Date().getTime() + (Math.random() * 100));
}

function sklik(){
    var uniqId = uniqId();
    var dov1 = `<div class="dwnctrl d-flex mt-3" id="${uniqId}">
        <input class="form-control mr-2" name="" id="" placeholder="Quality" style="width: 100px;">
        <input class="form-control mr-2" name="" id="" placeholder="Link">
        <input class="form-control mr-2" name="" id="" placeholder="Server Name" style="width: 150px;">
        <button type="button" class="btn toddd" id="post-grab" onclick="$('#${uniqId}').remove()">Remove</button>
        </div>`;
        $(".frmDowns").after(dov1);
}

edited Oct 08 '20 at 19:35

Rory McCrossan

331,213
40
305
339

answered Oct 08 '20 at 14:44

flyingfox

13,414
3
24
39

@RoryMcCrossan I just wrote the key point,in fact I think the OP's code need to improve,he has mixed double quote and single quote,am I right? – flyingfox Oct 08 '20 at 14:59
@RoryMcCrossan Sorry,but I think when I pass the id of the div,it can remove the div,what's wrong with my answer,can you help me,thanks in advance! – flyingfox Oct 08 '20 at 15:02
@RoryMcCrossan Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/222723/discussion-between-lucumt-and-rory-mccrossan). – flyingfox Oct 08 '20 at 15:05
@RoryMcCrossan will `onclick="$('#"+uniqId+"').remove()` not able to remove the div?I am a bit confused – flyingfox Oct 08 '20 at 15:07
After the edit yes - although your quotes are mismatched. I've edited to fix that for you and removed my comments as they now aren't needed – Rory McCrossan Oct 08 '20 at 19:34

epascarello · Answer 2 · 2020-10-08T15:21:52.470

First your usage of string template literals is totally wrong. It needs to be ${theVariable}

let _currentId = 0

function addRow() {

  const uniqueId = "row" + _currentId++;

  var dov1 = `<div class="dwnctrl d-flex mt-3" id='${uniqueId}'>
            <input class="form-control mr-2" name="" id="" placeholder="Quality" style="width: 100px;">
            <input class="form-control mr-2" name="" id="" placeholder="Link">
            <input class="form-control mr-2" name="" id="" placeholder="Server Name" style="width: 150px;">
            <button type="button" class="btn toddd" id="post-grab" onclick="$('#${uniqueId}').remove()">Remove</button>
            </div>                        
            `;
  $(".frmDowns").append(dov1);
}

addRow();
addRow();
addRow();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frmDowns"></div>

Why even use the id? You can use event delegation and select the ancestor and remove the row.

let _currentId = 0

function addRow() {

  const uniqueId = "row" + _currentId++;

  var dov1 = `<div class="dwnctrl d-flex mt-3" id='${uniqueId}'>
            <input class="form-control mr-2" name="" id="" placeholder="Quality" style="width: 100px;">
            <input class="form-control mr-2" name="" id="" placeholder="Link">
            <input class="form-control mr-2" name="" id="" placeholder="Server Name" style="width: 150px;">
            <button type="button" class="btn toddd remove">Remove</button>
            </div>                        
            `;
  $(".frmDowns").append(dov1);
}

addRow();
addRow();
addRow();

$(".frmDowns").on("click", "button.remove", function() {
  $(this).closest('.dwnctrl').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frmDowns"></div>

How to remove a div from unique id?

2 Answers2