如何在不使用javascript中的表的情况下删除div中的行

Question

大家好，这是我的源代码，当我按下使用javascript的删除按钮时，我需要删除Div中的Row，所以请给我一个解决方案。最重要的是我们不要使用Table代替Div。所以请给我一个解决方案。

＆＃13;

＆＃13;

function Add() {
  var x = document.querySelectorAll(".div1");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].innerHTML += "<br><br> <input type='text' name='mytext'>";
  }
}

function del() {
  var y = document.querySelectorAll(".div2");
  var i;
  for (var i = 0; i < y.length; i++) {
    y[i].innerHTML += "<br><br><br> <input type='button' value='delete' onclick='removeRow(this)'>";
  }
}


function removeRow(input) {
  input.parentNode.removeChild(input.previousSibling);
  input.parentNode.removeChild(input);
}

＆＃13;

#add_Btn {
  float: left;
  margin: 0% 0% 0% 72%;
  border-radius: 25px;
  cursor: pointer;
  padding: 10px;
}
body {
  background: #00ffff;
}
input[type=text] {
  padding: 5px;
  margin: 5px 0px 25px 0px;
  border: 2px solid #ccc;
  border-radius: 5px;
}
input[type=button] {
  padding: 5px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background: #00ff99;
  cursor: pointer;
}
#Wrapper {
  width: 80%;
  margin: 7% auto;
}
.div1 {
  float: left;
  width: 20%;
  background: #4dffc3;
}
.div2 {
  float: left;
  width: 20%;
  background: lightyellow;
}
#div3 {
  float: left;
  width: 20%;
  background: lightgray;
}
#div4 {
  float: left;
  width: 20%;
  background: lightblue;
}
#ClearFix {
  clear: both;
}

＆＃13;

<section id="Wrapper">
  <button id="add_Btn" onclick="Add(); del();">Add TextBox</button><br><br>
  <div class="div1">
    <p>This is Div one</p>
  </div>
  <div class="div1">
    <p>This is Div two</p>
  </div>
  <div class="div1">
    <p>This is Div threee</p>
  </div>
  <div class="div1">
    <p>This is Div Four</p>
  </div>
  <span class="div2">
    <p>This is Div Five</p>
  </span>
  <!--<div id="ClearFix"></div>-->
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须为每一行创建一个类，并按类删除

请参阅下面的示例如何到达

var cpt = 0;
    function Add()
    {
            var x = document.querySelectorAll(".div1");
            var i;
            for (i = 0; i < x.length; i++) 
            {
                x[i].innerHTML += "<br><br> <input type='text' name='mytext' class='"+cpt+"'>";
            }
    }

    function del()
    {
        var y = document.querySelectorAll(".div2");
        var i;
        for(var i=0;i<y.length;i++)
        {
            y[i].innerHTML += "<br><br><br> <input type='button' value='delete'  class='"+cpt+"' onclick='removeRow("+cpt+")'>";
        }
		cpt++;
    }


    function removeRow(input)
    {
		var list = document.getElementsByClassName(input);
		for(var i = list.length - 1; 0 <= i; i--)
		if(list[i] && list[i].parentElement)
		list[i].parentElement.removeChild(list[i]);
    }

    #add_Btn
        {
            float:left;
            margin:0% 0% 0% 72%;
            border-radius: 25px;
            cursor:pointer;
            padding:10px;
        }

    body
    {
        background: #00ffff;
    }

    input[type=text]
    {
        padding: 5px;
        margin:5px 0px 25px 0px;
        border: 2px solid #ccc;
        border-radius: 5px;
    }

    input[type=button]
    {
        padding: 5px;
        margin:5px 0px 25px 0px;
        border: 2px solid #ccc;
        border-radius: 5px;
        background:#00ff99;
        cursor:pointer;
    }

    #Wrapper
        {
            width:80%;
            margin:7% auto;
        }

        .div1
        {
            float:left;
            width:20%;
            background:#4dffc3;
        }


        .div2
        {
            float:left;
            width:20%;
            background:lightyellow;
        }

        #div3
        {
            float:left;
            width:20%;
            background:lightgray;
        }

        #div4
        {
            float: left;
            width:20%;
            background:lightblue;
        }

        #ClearFix
        {
            clear:both;
        }

<section id="Wrapper">

        <button id="add_Btn" onclick="Add(cpt); del(cpt);">Add TextBox</button>


        <div class="div1">
            <p>This is Div one</p>
        </div>

        <div class="div1">
            <p>This is Div two</p>
        </div>

        <div class="div1">
            <p>This is Div threee</p>
        </div>

        <div class="div1">
            <p>This is Div Four</p>
        </div>

        <span class="div2">
            <p>This is Div Five</p>
        </span>
        <!--<div id="ClearFix"></div>-->
    </section>

Answer 2

按@HassanSaghir更新代码。从js中删除<br/>并稍微修复css。

＆＃13;

＆＃13;

var cpt = 0;

function Add() {
    var x = document.querySelectorAll(".div1");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].innerHTML += "<input type='text' name='mytext' class='" + cpt + "'>";
    }
}

function del() {
    var y = document.querySelectorAll(".div2");
    var i;
    for (var i = 0; i < y.length; i++) {
        y[i].innerHTML += "<input type='button' value='delete'  class='" + cpt + "' onclick='removeRow(" + cpt + ")'>";
    }
    cpt++;
}


function removeRow(input) {
    var list = document.getElementsByClassName(input);
    for (var i = list.length - 1; 0 <= i; i--)
        if (list[i] && list[i].parentElement)
            list[i].parentElement.removeChild(list[i]);
}

＆＃13;

#add_Btn {
    float: left;
    margin: 0% 0% 0% 72%;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px;
}
body {
    background: #00ffff;
}
input {
  display: block; /* new */
}
input[type=text] {
    padding: 5px;
    margin: 5px 0px 25px 0px;
    border: 2px solid #ccc;
    border-radius: 5px;
}
input[type=button] {
    padding: 5px;
    margin: 5px 0px 25px 0px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background: #00ff99;
    cursor: pointer;
}
#Wrapper {
    width: 80%;
    margin: 7% auto;
}
.div1 {
    float: left;
    width: 20%;
    background: #4dffc3;
}
.div2 {
    float: left;
    width: 20%;
    background: lightyellow;
}
#div3 {
    float: left;
    width: 20%;
    background: lightgray;
}
#div4 {
    float: left;
    width: 20%;
    background: lightblue;
}
#ClearFix {
    clear: both;
}

＆＃13;

<section id="Wrapper">
  <button id="add_Btn" onclick="Add(cpt); del(cpt);">Add TextBox</button>
  <div class="div1">
    <p>This is Div one</p>
  </div>
  <div class="div1">
    <p>This is Div two</p>
  </div>
  <div class="div1">
    <p>This is Div threee</p>
  </div>
  <div class="div1">
    <p>This is Div Four</p>
  </div>
  <span class="div2">
    <p>This is Div Five</p>
  </span>
  <!--<div id="ClearFix"></div>-->
</section>

＆＃13;

＆＃13;

＆＃13;